VUE computed 做的省市区三级联动，修改时该怎么写

Question

当第一级选择后才会渲染出第二级。第三级同样。但是现在我要一上来就去加载好三个级别。并且可以修改。

2.下面是代码

address2 = new Vue({
    el: "#provincial2",
    data: {
        address2: "",
        selected12: "",
        selected13: "",
        data2: ""
    },
    computed: {
        selected_tow2:function() {
            var selected_tow2 = [];
                selectedDepart2 = this.$data.selected12;
            this.$data.address2.forEach(function(c) {
                if(c.name == selectedDepart2) {
                    selected_tow2 = c.children
                };
            });
            address2.$set("data2", selected_tow2);
            return selected_tow2;
        },
        selected_three2: function() {
            var selected_three2 = [],
                selectedDepart3 = this.$data.selected13;
            this.$data.data2.forEach(function(d) {
                if(d.name == selectedDepart3) {
                    selected_three2 = d.children
                };
            });
            return selected_three2;
        }
    }
});
$.getJSON("address.json", function(result) {
    address2.address2 = result.data.china;
});

    

<div class="user_information_nr" id="provincial2">
    <select class="information_text" id="selected11" v-model="selected12">
        <option v-for="provincial2 in address2" v-bind:id="provincial2.id" v-html="provincial2.name"></option>
    </select>
    <select class="information_text" id="selected12" v-model="selected13">
        <option v-for="provincial_tow2 in selected_tow2" v-bind:id="provincial_tow2.id" v-html="provincial_tow2.name"></option>
    </select>
    <select class="information_text" id="selected13">
        <option v-for="provincial_three2 in selected_three2" v-bind:id="provincial_three2.id" v-html="provincial_three2.name"></option>
    </select>
</div>

现在的状态是加载好第一级。而我获取到数据。然后修改第一级的地址。然后在把第二级加载出来。然后在修改第二级。然后把第三级加载出来。然后修改第三级的地址

---

刚入行的菜鸟。非常业余。第一次问问题= =

Answer 1

https://github.com/tansuo1989...

评论不方便写，补充到这里来：

       prochange:function(){
            this.proname=this.getname(this.pro,this.pid);//获取省份名,

            this.city=this.all.city[this.pid];
            this.cid=this.city[0]['id'];
            this.county=this.all.county[this.cid];
            if(this.county.length>0){
                this.ccid=this.county[0]['id'];
            }
        },
        getname:function(arr,id){
           for(var i=0;i<len;i++){
               if(arr[i]['id']==id){
                   return arr[i]['name'];
               }
           }
           return false;
        }
        

可以添加一个getname方法，用循环去通过id获取name的值。

因为当时我只需要获取id就可以了，所以没有考虑获取name的情况！

。。。
以后有空再完善一下，直接把这个东西做成vue组件！

补充：
经修改，可以直接用：npm i vue-myarea 安装使用了
使用方法：

<myarea @select="haha"></myarea>

只要监听select事件，就可以得到选择的结果了。

github地址：https://github.com/tansuo1989...