先上官網原組件:

<van-address-edit:area-list="areaList"show-postalshow-deleteshow-set-defaultshow-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地址编辑篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。