最近学习vue，想着写一写demo练习练习。
此demo是省市区的三级联动，像这样的场景我们经常看到。我也是刚开始写没有头绪，然后多方查资料。
写此demo时踩过的坑：
1、数据：我们希望后台给我们的数据是怎样的，方便我们操作。省市区三级联动，数据是超级相关联的，我们不能单独存数据。所以数据用数组对象，一级一级的拿到数据。
2、在用v-model双向绑定select数据时，出现一个问题。我最开始在option标签里面加了value属性，然后就怎样也拿不到select中选择的option的值。这个问题我目前也没有想清楚是啥原因，就比如像这样，有一个value属性，那么我怎么都关联不到city的值。
我猜想是因为v-model默认关联的就是value属性，然后value默认为空就不可以，但是不是很确定，有大神如果知道，一定要给我说说呀。（这个问题我找了好久好久，因为此时vs code我安装了标签提示插件，然后默认就有。找了好久才发现是它的原因，所以证明一件事，还是不要太懒啊。。）
3、选择省更新数据，最开始只想着更新市 的数据，这样的话若我们第二次选择时，还没有选择市时，我们的区的数据还是之前的数据，比如：
第一次：
第二次我们想选其他省：
选择省时点了上海市，只有市的数据更新了，而区的数据还是我们第一次选择的
解决：方法一：还是只调用更新市数据的函数，在函数开始给sub数据赋值为空值，
因为我写了如果没有值就不显示
那么结果就是：
当我们选择市时，又出现区的数据
方法二：我们更希望选择省之后，市区数据都跟着变为对应的默认值，所以，就可以调用两个方法
这样随便改变那个省，就有对应默认的市区数据
第一次：
第二次：
index.html：
<div id="itany"> <!-- 省 --> <!-- 调用两个方法，同时改变市区数据 --> <select v-model="prov" @change="updataCity();updataSub()"> <option v-for='v in arr'>{{v.name}}</option> </select> <!-- 市 --> <select v-model="city" @change="updataSub()" v-if="city"> <option v-for='v in cityArr'>{{v.name}}</option> </select> <!-- 区 --> <select v-model="sub" v-if="sub"> <option v-for="v in subArr">{{v}}</option> </select> </div>index.js:
window.onload = function(){ //后台拿到的数据，我就写了一部分测试 var array = [ { name: '请选择', sub: [{name:'请选择'}] }, { name: '北京', sub:[ { name: '北京', sub: ['大兴区','东城区','朝阳区'] } ] }, { name: '四川省', sub:[ { name: '成都市', sub: ['双流区','新都区','成华区','高新区','青羊区','锦江区'] },{ name: '遂宁市', sub: ['船山区','大英县','安居区','射洪县','蓬溪县'] },{ name: '自贡市', sub: ['大安区','自流井区','贡井区','沿滩区','荣县','富顺区'] },{ name: '泸州市', sub: ['江阳区','纳溪区','龙马潭区','泸县','合江县','叙永县','古蔺区'] }, ] }, { name: '广东省', sub:[ { name: '广州市', sub: ['越秀区','荔湾区','天河区','海珠区','黄埔区'] },{ name: '深圳市', sub: ['福田区','南山区','宝安区','龙岗区'] },{ name: '珠海市', sub: ['香洲区','金湾区'] },{ name: '汕头市', sub: ['金平区','濠江区','潮南区','龙湖区'] },{ name: '佛山市', sub: ['禅城区','三水区','南海区'] } ] }, { name: '上海市', sub:[ { name: '上海市', sub: ['普陀区','静安区','杨浦区','黄浦区','南汇区','嘉定区','徐汇区'] } ] } ] new Vue({ el: "#itany", data: { arr: array, prov: '', //被选择的省 cityArr:[], //选择对应省的市数据 city:'', //被选择的市 sub: '', //被选择的区 subArr:[], //选择对应市的区数据 }, methods: { //更新市数据 updataCity:function(){ //在重新选择省的时候，清除之前的被选择的区数据,如果在选择省的时候只调用这个方法时， //可以采取将三级区数据置空，这样三级选择框就不会出现，否则会出现省市变化了区未变的情况 // this.sub=''; //此demo中，在选择省时，我采用的是调用两个方法 //给cityArr[]赋值 this.arr.forEach((item,index)=>{ if(item.name == this.prov){ this.cityArr = item.sub; } }); //初始化默认值 this.city = this.cityArr[0].name; }, //更新区数据 updataSub:function(){ this.cityArr.forEach((item,index)=>{ if(item.name == this.city){ this.subArr = item.sub; } }); this.sub = this.subArr[0]; } } }); }
