vant踩坑地址AddressList地址编辑篇

先上官网原组件:

<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="['请选择', '请选择', '请选择']"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>

script:

import { Toast } from 'vant';
export default {
data() {
return {
areaList,
searchResult: [],
};
},
methods: {
onSave() {
Toast('save');
},
onDelete() {
Toast('delete');
},
onChangeDetail(val) {
if (val) {
this.searchResult = [
{
name: '黄龙万科中心',
address: '杭州市西湖区',
},
];
} else {
this.searchResult = [];
}
},
},
};

直接引用上述官网上组件运行时会报以下错误:

[Vue warn]: Error in data(): "ReferenceError: areaList is not defined"

经过翻阅文档及查阅资料,发现该错误是因为vant虽然有自己的默认地址列表areaList,但它没有在vant中,npm install vant时不会附带下载该地址列表,需要自己手动下载省市区数据:

npm i @vant/area-data -D

使用时在需要引入的页面引入

import { areaList } from '@vant/area-data';

这样才能正常使用地址编辑组件中的地址列表

最后

以上就是聪明小虾米为你收集整理的vant踩坑地址AddressList地址编辑篇的全部内容，希望文章能够帮你解决vant踩坑地址AddressList地址编辑篇所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。