vue三级联动下拉框效果

vue三级联动下拉框效果

html:

<div id="example">
        <select class="sel" v-model="prov">
            <option v-for="option in arr" :value="option.name">
                {{ option.name }}
            </option>
        </select>
        <select class="sel" v-model="city">
            <option v-for="option in cityArr" :value="option.name">
                {{ option.name }}
            </option>
        </select>
        <select class="sel" v-model="district" v-if="district">
            <option v-for="option in districtArr" :value="option.name">
                {{ option.name }}
            </option>
        </select>
</div>

css:

*{
margin: 0;
padding: 0;
}
.sel{
width: 150px;
        height: 30px;
        line-height: 30px;
}

vuejs:

<script src="js/vue.js"></script>
<script src="js/items.js"></script>
<script>
    var vm = new Vue({
            el: '#example',
            data: {
                arr: arrAll,
                prov: '厨房',
                city: '电路',
                district: '灯具',
                cityArr: [],
                districtArr: []
            },
            methods: {
                updateCity: function(){
                    for(var i in this.arr){
                        var obj = this.arr[i];
                        if (obj.name == this.prov){
                            this.cityArr = obj.sub;
                            break;
                        }
                    }
                    this.city = this.cityArr[1].name;
                },
                updateDistrict: function(){
                    for(var i in this.cityArr){
                        var obj = this.cityArr[i];
                        if (obj.name == this.city) {
                            this.districtArr = obj.sub;
                            break;
                        }
                    }
                    if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name){
                        this.district = this.districtArr[1].name;
                    }else{
                        this.district = '';
                    }
                }
            },
            beforeMount: function(){
                this.updateCity();
                this.updateDistrict();
            },
            watch: {
                prov: function(){
                    this.updateCity();
                    this.updateDistrict();
                },
                city: function(){
                    this.updateDistrict();
                }
            }
        })
</script>