vant 里面的picker组件请求地址的时候第二数据拿到了但是列表不渲染?
<van-popup v-model="showPicker" round position="bottom">
<van-picker
show-toolbar
value-key="cityName"
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="search"
/>
</van-popup>
调用接口请求地区数据,初始化列表
created() {
// 获取省
this.axios
.post("")
.then((response) => {
let data = response.data;
this.columns[0].values = data.resultInfo;
})
.catch((error) => {
console.log(error);
});
// 获取市
this.axios
.post("", {
parentCode: "110000",
})
.then((response) => {
let data = response.data;
this.columns[1].values = data.resultInfo;
})
.catch((error) => {
console.log(error);
});
// 获取区
this.axios
.post("", {
parentCode: "110000",
})
.then((response) => {
let data = response.data;
this.columns[2].values = data.resultInfo;
})
.catch((error) => {
console.log(error);
});
},
第一列数据改变的时候
methods: {
search(picker, value, index) {
console.log(value[0], "选中的省");
console.log(value[1], "选中的市");
console.log(value[2], "选中的区");
// 获取市
this.axios
.post("", {
parentCode: value[0].cityCode
})
.then(response => {
let data = response.data;
this.columns[1].values = data.resultInfo;
})
.catch(error => {
console.log(error);
});
// 获取区
this.axios
.post("", {
parentCode: value[1].cityCode
})
.then(response => {
let data = response.data;
this.columns[2].values = data.resultInfo;
})
.catch(error => {
console.log(error);
});
this.$emit("input", this.value);
},
onConfirm(e) {
console.log(e, "确认");
this.showPicker = false;
console.log(this.columns);
// this.value.area = e[0].cityName + e[1].cityName + e[2].cityName;
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论