在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue v-for循環(huán)綁定class的問題

vue v-for循環(huán)綁定class的問題

我現(xiàn)在在做一個左側(cè)欄的分類,json結(jié)構(gòu)是這樣的。

{
  "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>

修改好了,不過這樣會有點(diǎn)問題,就是兩個tab會同時點(diǎn)擊同一個index的tab

回答
編輯回答
初念

改個名就行啦

(item, i) in items
2017年5月20日 19:29
編輯回答
悶油瓶
 <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>
2017年11月3日 06:58