项目中有这样一个需求,省市区的选择,想到用到el-Cascader组件,动态加载次级选项。
现象
首先应获取所有的省,然后用户选择某个省,动态加载该省下所有的市。这个过程中数组某项被修改,视图未更新
<label>发出省市</label>
<el-cascader v-model="sendAddress" :options="provenceArray"
@active-item-change="handleItemChange" :props="props">
</el-cascader>
复制代码
// data
provenceArray: [],
props:{
label: 'areaName',
value: 'areaId',
children: 'cities'
},
复制代码
// ajax 获取省, 同时修改数组对象,每一项添加一个属性cities,并设置为空数组
getProvence() {
$api.searchAreaInfo({
parentId: 0
}).then((res) => {
this.provenceArray = res && res.data && res.data.data || []
this.provenceArray.forEach((item,index)=>{
this.provenceArray[index].cities = [] // 视图未更新
// this.$set(this.provenceArray[index], 'cities', []) // right
})
})
}
复制代码
// 利用active-item-change事件,可以在用户点击某个省份时拉取该省份下的城市数据
handleItemChange(val) {
let value = val[0]
$api.searchAreaInfo({
parentId: value
}).then((res) => {
let cities = res && res.data && res.data.data || []
for(let i = 0; i < this.provenceArray.length; i++) {
if(this.provenceArray[i].areaId === value) {
this.provenceArray[index].cities = cities // 视图未更新
// this.$set(this.provenceArray[i], 'cities', cities) // right
break;
}
}
})
}
复制代码