14.智能搜索案例：axios搜索接口调用

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组件的视图层 显示！！

智能提示实现效果如下所示: