VUE二级导航遍历数据

二级导航遍历数据

先在小黑框下载 axios插件
使用npm:

$ npm install axios

在下载vant插件
通过 npm 安装

npm i vant -S

必须在main.js中引入vant和axios插件
完整引入代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Vue.config.productionTip = false
Vue.prototype.$axios = axios;

new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')

父组件template中

 <div class="navs">
      <van-tabs color="red" @click="selNavOne" v-model="nav1Active">
        <van-tab v-for="(nav,index ) in navs" :key="nav.cid" :name="index" :title="nav.cname">
          <!-- 点击全部时展示 -->
          <div v-if="nav.cid==0">
            <List :list="goodList"></List>
          </div>

          <van-tabs color="red" v-if