轉載自https://segmentfault.com/q/1010000015412328/revision

我現在在做一個左側欄的分類，json結構是這樣的。

{
  "dataInfo":[
    {
      "name":"我是買家",
      "dataList":[
        {
          "title": "線上支付教程",
          "content": [
            {
              "subTit": "郵箱註冊"
            },
            {
              "subTit": "登入"
            }
          ]
        },
        {
          "title": "線上支付教程",
          "content": [
            {
              "subTit": "郵箱註冊"
            },
            {
              "subTit": "登入"
            }
          ]
        }
      ]
    },
    {
      "name":"我是賣家",
      "dataList":[
        {
          "title": "線上支付教程111",
          "content": [
            {
              "subTit": "郵箱註冊22"
            },
            {
              "subTit": "登入"
            }
          ]
        }
      ]
    }
  ]
}
 

程式碼是這樣的

<template>
  <div class="leftBar leftHelpBar">
    <ul class="leftHelp_tab clearfix">
      <li v-for="(item, index) in items" :class="{onCur: iscur == index}" @click="setCur(index)" :key="index">{{ item.name }}</li>
    </ul>
     <ul class="help_list" v-for="(item, index) in items" :key="index" v-show="iscur == index">
      <li v-for="(item, index) in item.dataList" :key="index">
        <h3>{{item.title}}</h3>
        <span v-for="(item, subIndex) in item.content"
              :key="subIndex"
              :class="{curStyle: `${index},${subIndex}`== getcur}"
              @click="postCur(`${index},${subIndex}`)">
          {{ item.subTit }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      iscur: 0,
      getcur: '0,0',
      items: []
    }
  },
  mounted: function () {
    axios.get('static/data/leftHelpBase.json')
      .then((res) => {
        console.log(res)
        this.items = res.data.dataInfo
        this.items = res.data.dataInfo
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    setCur: function (index) {
      this.iscur = index
    },
    postCur: function (index) {
      this.getcur = index
    }
  }
}
</script>

 

修改好了，不過這樣會有點問題，就是兩個tab會同時點選同一個index的tab