关于vant的地址编辑AddressEdit注意事项

<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"
/>

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 = [];
}
},
},
};

首先说一下searchResult这个功能，主要显示下方，如图所示的功能，可以自己根据情况，选择要或者不要，不要的话，删除对应的代码就行

我遇到的第一个问题，会发现点击地区，没有数据，这时候，你需要吧数据加进来。

如图所示，官方这里告诉你，需要用import引入，但是，注意我用横线画出来的那个，首先需要你去安装一下这个，官方这里给的是yran，实际情况，根据你项目的情况，如果是用yran创建的项目。直接使用，如果是用npm创建的项目，需要你改为npm add @vant/area-data(也就是说，吧yran换成npm)。
安装时记得先关闭项目再安装，切记。

接下来，说一下我遇到的另外个问题

一切都正常了，然后去打印，用的是这里

onSave() {
Toast('save');
console.log(this)
},

这里打印this，但是 始终无法获取到页面输入的数据，也就是在这里卡了很久，中间试过各种方式，当时都准备去看页面，每个input的class名字，然后挨个获取value值。但是，最后吧这个解决了，方法也是很简单

onSave(val) {
console.log(val)
}

这样就可以获取到页面输入的所有值了。
很简单吧，但是，就这个，我弄了一个多小时，官方文档对新人不是太友好。

最后

以上就是尊敬小蝴蝶为你收集整理的关于vant的地址编辑AddressEdit注意事项的全部内容，希望文章能够帮你解决关于vant的地址编辑AddressEdit注意事项所遇到的程序开发问题。

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