axios搜索接口调用
使用axios,安装axios
cnpm i axios --save
在app .vue组件中引入axios
import axios from 'axios'
在app.vue组件中
我们在data数据中心kwVal有值的情况下,
监听kwVal它的新的值---
kwVal(val){
// 监听它的新的值
// 如果没有值,不监听
if(val.trim() === '') return;
}
把res.data.data数组的内容,赋值给数据中心的这个属性this.guess
this.guess = res.data.data
然后,在app.vue的视图层,对 联想词 进行遍历
<!-- 智能提示 -->
<div class="message-list" v-show="kwVal.length>0">
<!-- 对 联想词 进行遍历 -->
<cell v-for="(item,index) in guess" :key="index"
:title="item.kw" :text="item.total" @click="search"></cell>
</div>
将遍历的结果 注入(传入到cell组件内)
:title="item.kw" :text="item.total"
传入的内容,在cell组件的视图层 显示!!
智能提示实现效果如下所示: