新人关于vant的地址编辑AddressEdit注意事项
- 我遇到的第一个问题,会发现点击地区,没有数据,这时候,你需要吧数据加进来。
- 接下来,说一下我遇到的另外个问题
第一次使用vantui做项目,写到地址编辑这里,遇到了一些问题,网上不容易找到,在这里总结一下。
官网中给的文档是这样的
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13<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
30import { 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)。
安装时记得先关闭项目再安装,切记。
接下来,说一下我遇到的另外个问题
一切都正常了,然后去打印,用的是这里
复制代码
1
2
3
4
5onSave() { Toast('save'); console.log(this) },
这里打印this,但是 始终无法获取到页面输入的数据,也就是在这里卡了很久,中间试过各种方式,当时都准备去看页面,每个input的class名字,然后挨个获取value值。但是,最后吧这个解决了,方法也是很简单
复制代码
1
2
3
4onSave(val) { console.log(val) }
这样就可以获取到页面输入的所有值了。
很简单吧,但是,就这个,我弄了一个多小时,官方文档对新人不是太友好。
最后
以上就是尊敬小蝴蝶最近收集整理的关于关于vant的地址编辑AddressEdit注意事项的全部内容,更多相关关于vant内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复