版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!--一级菜单-->
<select name="province" id="province" class="classify" v-on:change="indexSelect01" v-model="indexId">
<option value="选择一级菜单">选择一级菜单</option>
<option :value="item.id" v-for="(item,index) in select01">{{item.name}}</option> <!---->
</select>
<!--二级菜单-->
<select name="city" id="city" class="classify mt10" v-model="indexId2">
<option value="选择二级菜单">选择二级菜单</option>
<option :value="k.id" v-for="k in select02">{{k.name}}</option>
</select>
<script type="text/ecmascript-6">
import axios from 'axios'
export default {
data(){
return{
select01: [],//获取的一级数组数据
select02: [],//获取的二级数组数据
indexId:'选择一级菜单',//定义分类一的默认值
indexId2:'选择二级菜单',
indexNum:0,//定义一级菜单的下标
}
},
mounted(){
//获取json数据信息
axios.get('xxxxxxxxxxxxxxxxxxxxxxxxxx',{
//xxxxxxxxxxxxxxxxxxx
})
.then((res) => {
let mes = res.data;
this.select01 = mes.subject;
this.indexSelect01();
})
.catch((error) => {
console.log(error)
});
},
methods:{
indexSelect01(){
let i = 0;
for (i = 0;i<this.select01.length;i++) {
if (this.select01[i].id == this.indexId){
this.indexNum = i;
break
}
}
this.select02 = this.select01[this.indexNum].obj;
}
}
}
</script>{
"data": {
"subject": [
{
"id": 1,
"name": "xx01",
"obj": [
{
"id": 3,
"name": "xxxx01",
"obj": [
]
},
{
"id": 4,
"name": "xxxx02",
"sub": [
]
},
{
"id": 5,
"name": "xxxx03",
"obj": [
]
}
]
},
{
"id": 2,
"name": "xx02",
"obj": [
{
"id": 6,
"name": "xxxx01",
"obj": [
]
},
{
"id": 7,
"name": "xxxx02",
"obj": [
]
},
{
"id": 8,
"name": "xxxx03",
"obj": [
]
}
]
}
]
}
}