I am now doing a classification in the left sidebar. The json structure looks like this.
{
"dataInfo":[
{
"name":"",
"dataList":[
{
"title": "",
"content": [
{
"subTit": ""
},
{
"subTit": ""
}
]
},
{
"title": "",
"content": [
{
"subTit": ""
},
{
"subTit": ""
}
]
}
]
},
{
"name":"",
"dataList":[
{
"title": "111",
"content": [
{
"subTit": "22"
},
{
"subTit": ""
}
]
}
]
}
]
}code goes like this
<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>
has been modified, but there will be a problem, that is, two tab will click on the tab of the same index at the same time