vue数据调取怎么渲染列表_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);

<