vue获取后台数据列表并在页面遍历显示

1.在home.js中设置url

var home = {
  searchByVender:'/index/search', //首页搜索-商家和商品列表
}

2.引入home.js

import home from "@/common/api/home"

3.在data中定义关键字和搜索返回的商品列表

data() {
  return {
    keyword: '',  //搜索关键字
    searchShops: [], //搜索返回的商品
  }
},

4.在生命周期函数中调用搜索函数

mounted() {
  this.getShops();
},

　　或者在methods中调用search函数

search() {
  const keyword = this.keyword.trim()
  this.getShops(keyword);
},

5.在搜索页面通过关键字获取商品（getShop方法）

getShops(keyword) {
  const vm = this;
  const url = home.searchByVender;
  const params = "?schoolId=1&keywords=" + keyword;
  // 记录搜索历史
  this.$store.dispatch('saveSearchShopHis', keyword);
  vm.axios.get(url + params).then((response) => {
    Indicator.close();
    let results = (response.data && response.data.results) || [];
    if (results && results.length > 0) {
      // 获取搜索到的商品
      vm.searchShops = results;
    } else {
      // 没有搜索到商品
      // 展示热搜
      this.isShowSearch = true;
      // 将之前搜索到的商品置为空
      vm.searchShops = [];
      // 将关键字置空
      vm.keyword = "";
      Toast({
        message: '没找到合适的商品或商家',
        position: 'middle',
        duration: 1000
      });
    }
  }, (response) => {
    Indicator.close();
    Toast({
      message: '数据获取失败，请重试',
      position: 'middle',
      duration: 1000
    });
  });
},

6.在页面中渲染出来

<ul>
  <li v-for="(shops, index) in searchShops">
    <div class="searchResultShop">
      <img class="searchResultShopImg" :src="shops.imagePath">
      <a class="searchResultShopName">{{shops.name}}</a>
    </div>
    <div class="searchResultGoods">
      <a class="searchResultGoodsItem" v-for="(shop, index) in shops.goods">
        <img class="searchResultGoodsImg " :src="shop.imagePath"/>
        <p class="searchResultGoodsPrice">{{shop.name}}￥{{shop.price}}</p>
      </a>
    </div>
  </li>
</ul>

vue获取后台数据列表并在页面遍历显示

推荐阅读