热门推荐词出不来

<template>
<div class="hot">
<h4 class="hot-title">热门搜索</h4>
<div class="loading-container" v-if="!hots.length">
<me-loading/>
</div>
<ul class="hot-list" v-else>
<li
class="hot-item"
v-for="(item, index) in hots"
:key="index"
>{{item.hotWord}}</li>
</ul>
</div>
</template>

<script>
import MeLoading from 'base/loading';
import {getSearchHotKeyword} from 'api/search';
// import {searchMixin} from 'assets/js/mixins';

export default {
name: 'SearchHot',
components: {
MeLoading
},
// mixins: [searchMixin],
created() {
this.getHotKeyword().then(() => {
this.$emit('loaded');
});
},
data() {
return {
hots: []
};
},
methods: {
getHotKeyword() {
return getSearchHotKeyword().then(data => {
return new Promise(resolve => {
if (data) {
this.hots = data;
resolve();
}
});
});
}
}
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/mixins";

.hot {
padding-left: 10px;
background-color: #fff;
border-bottom: 1px solid $border-color;
margin-bottom: 10px;

&-title {
height: 34px;
line-height: 34px;
font-size: $font-size-l;
font-weight: bold;
}

&-list {
display: flex;
flex-wrap: wrap;
}

&-item {
padding: 8px;
background-color: #f0f2f5;
border-radius: 4px;
margin: 0 10px 10px 0;
color: #686868;
}
}

.loading-container {
padding: 10px 0;
}
</style>

慕数据1344648 2019-11-26

源自：实战：Vue 完成分类、搜索页 2-4 热门搜索

收起

2回答

好帮手慕星星 2019-11-26 17:17:15

同学你好，通过接口获取到的json数据已经是对象了：

就不需要再转化了，参考修改：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕星星 2019-11-26 11:06:08

同学你好，将你的代码粘贴到源码中测试效果没有问题：

自己可以这样试试，也有可能是api/search.js文件的问题，可以替换掉试试或者将这个文件代码粘贴上来，老师帮助你测试。

祝学习愉快！

收起回答

提问者慕数据1344648 #1

import axios from 'axios'; import jsonp from 'assets/js/jsonp'; import {jsonpOptions, TIMEOUT} from './config'; // 获取热门搜索数据--ajax export const getSearchHotKeyword = () => { return axios.get('http://www.imooc.com/api/search/hot', { // timeout: 10 timeout: TIMEOUT }).then(res => { // console.log(res); res = JSON.parse(res.data.hotKeyWord); if (res && res.owner) { // succeed return res.owner; } throw new Error('没有成功获取到数据！'); }).catch(err => { if (err) { console.log(err); } }).then(res => { return new Promise(resolve => { setTimeout(() => { resolve(res); }, 1000); }); }); }; // 获取搜索结果数据--jsonp export const getSearchResult = keyword => { const url = 'https://suggest.taobao.com/sug'; const params = { q: keyword, code: 'utf-8', area: 'c2c', nick: '', sid: null }; // jsonpOptions.timeout = 100; return jsonp(url, params, jsonpOptions).then(res => { // console.log(res); if (res.result) { // console.log(res); return res.result; } throw new Error('没有成功获取到数据！'); }).catch(err => { if (err) { console.log(err); } }).then(res => { return new Promise(resolve => { setTimeout(() => { resolve(res); }, 1000); }); }); };

2019-11-26 15:33:19