vant踩坑地址AddressList地址编辑篇

1
2
3
4
5
6
7
8
9
10
11
12
<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"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 = [];
}
},
},
};

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

1
npm i @vant/area-data -D

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