三级联动

最新推荐文章于 2021-12-28 15:35:41 发布

weixin_45176023

最新推荐文章于 2021-12-28 15:35:41 发布

阅读量118

点赞数

分类专栏：小意思

本文链接：https://blog.csdn.net/weixin_45176023/article/details/99443592

版权

小意思专栏收录该内容

42 篇文章 0 订阅

订阅专栏

--请选择-- {{ item.name }} --请选择-- {{ item.name }} --请选择-- {{ item }}

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            myProvince: "pleaseSel",
            myCity: "pleaseSel",
            myCounty: "pleaseSel",
            allProvince: allCities,
            allCity: [],
            allArea: []
        },
        watch: {
            myProvince(val){
                this.myCity = "pleaseSel";  //重置为请选择
                this.myCounty = "pleaseSel";    //重置为请选择
                allCities.forEach(item=>{   //遍历所有数据, 找到选中的省
				// console.log(this.myProvince)
                    if(item.name == this.myProvince){
                        this.allCity = item.city;
						console.log(this.myProvince)
                    }
                })
            },
            myCity(val){
                this.allCity.forEach(item=>{
                    if(item.name == this.myCity){
                        this.allArea = item.area;
                    }
                })
            }
        },
    })
</script>