通过$event解决select的级联操作

实现思路是通过$event中关于value(类似于vfor中index的值)来索引对应的下级目录

<select @change="select($event)">
    <option v-for="(data,index) in datas">{{data.province}}</option>
</select>
<select>
    <option v-for="(city, index) in datas[value].city">{{city}}</option>
</select>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            datas: [
                { province: "辽宁", city: ["沈阳", "大连"] },
                { province: "吉林", city: ["四平", "长春", "四平东"] },
                { province: "黑龙江", city: ["哈尔滨", "大庆", "齐市", "黑河"] }
            ],
            value: "0" //因为市级菜单在初始时就加载了,通过select的赋值只有选择菜单时才会发生,所以先赋初值
        },
        methods: {
            select: function (event) {
                this.value = event.target.value;
              	/*
              	 * 将$event传参过来以后会获得很多值
              	 * 我们需要datas中所选择省份的下标就存在于event.target.value中
              	 */
            }
        },
    })
</script>
comments powered by Disqus