vue v-for循环绑定class的问题

Question

我现在在做一个左侧栏的分类，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

Answer 1

 <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}`== '0,0'}" @click="postCur(index)">
          {{ item.subTit }}
        </span>
      </li>
</ul>

Answer 2

改个名就行啦

(item, i) in items