vant踩坑地址AddressList地址编辑篇_yueye_wu的博客-程序员宅基地_vant 地址

技术标签: 前端框架  Vant Ui  

先上官网原组件:

<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';

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yueye_wu/article/details/120063454

智能推荐

java 泛型 int_Java泛型(一):实践入门_林文泽的博客-程序员宅基地

说到泛型,大家肯定不会陌生。这个从Java SE5引入的新特性为我们的开发提供了极大地方便。一方面,使得我们可以对于不同数据类型的通用操作统一放在一个类或方法中去定义、实现,而无需针对每种不同的数据类型去提供多个类或方法;另一方面,泛型编程实现了编译期的类型安全检查,以避免运行期发生类型转换异常泛型的基本使用泛型类JDK中大量应用了泛型类,比如我们经常使用的LinkedList、HashMap等。...

深入解析Java的注解机制_JavaEdge.的博客-程序员宅基地

目录1 基本语法1.1 定义注解1.2 元注解编写注解处理器注解元素默认值限制生成外部文件替代方案注解不支持继承实现处理器使用javac处理注解最简单的处理器更复杂的处理器基于注解的单元测试在 @Unit 中使用泛型实现 @Unit本章小结注解(也被称为元数据)为我们在代码中添加信息提供了一种形式化的方式,使我们可以在稍后的某个时刻更容易的使用这些数据。注解在一定程度上是把元数据和源代码文件结合在一起的趋势所激发的,而不是保存在外部文档。这同样是对像 C# 语言对于 Java 语言特性压力的一种回应

mysql5.6 mariadb选择_数据库对比:选择MariaDB还是MySQL?_weixin_39530149的博客-程序员宅基地

功能比较有一些令人兴奋的新功能(如窗口函数、角色控制或公共表表达式(CTE))可能值得一提,但本文只是为了比较两个数据库,所以我们在这里只讨论其中一方专门提供的功能,以便更好地帮助读者选择合适自己的数据库。让我们来看一下只有其中一个数据库专门提供的功能:1. JSON 数据类型——从 5.7 版本开始,MySQL 支持由 RFC 7159 定义的原生 JSON 数据类型,可以高效地访问 JSON ...

任意四面体的外接球的半径(克列尔(A.L.Crelle)公式)_weixin_30508241的博客-程序员宅基地

【问题提出】克列尔(A.L.Crelle)公式对任意四面体$ABCD$,其体积$V$和外接球半径$R$满足$$6RV=\sqrt{p(p-aa_1)(p-bb_1)(p-cc_1)}.$$其中$p=\frac 12(aa_1+bb_1+cc_1)$,$a,a_1,b,b_1,c,c_1$分别为四面体的三组对棱的长.允许我先跑个题且在正文里介绍下近代欧氏几何学中的布洛卡点. 克列尔(178...

客户端版本与房间版本不匹配_客户端和版本不匹配?_萦小主的博客-程序员宅基地

2008-07-17关于MAC地址的修改我们学校用的简单的修改方法读者可以在桌面上的“网上邻居”图标上单击右键,选择“属性”,在弹出的“网络连接”的对话框中,在“本地连接”图标上单击右键,选择“属性”,会弹出一个“本地连接属性”的对话框,单击“配置”按钮,选择“高级”,选中左栏“属性”中“Network Address”(其实,并非所有的网卡,对物理地址的描述都用“Network Address”...

mysql分表后 迁移数据_MySQL分库分表单库分表和迁移数据(4th)_短尾巴的松鼠的博客-程序员宅基地

前奏因为在分表的时候我们需要知道我们分的是第几个表,所以我们先需要初始化我们的分表号--创建一个系统信息表为了记录下当前最大的分表号DROPTABLEsystem_setting;CREATETABLEsystem_setting(system_setting_idINTunsignedNOTNULLAUTO_INCREMENTCOMMENT'系统设置表ID',nameV...

随便推点

ConcurrentLinkedQueue代码解析_weixin_34318272的博客-程序员宅基地

原因:学习ConcurrentLinkedQueue是看到akka框架的默认邮箱是使用ConcurrentLinkedQueue实现的。1. ConcurrentLinkedQueue在java.util.concurrent包中(java 版本是1.7.0_71),类间继承关系如下:public class ConcurrentLinkedQueue&lt;E&gt;...

pycharm出现的安装的包问题_成都犀牛的博客-程序员宅基地

首先我们得明确一点,使用这个IDE时候我们可以去选定对应的python解释器,同时也表示着你选择的这个解释器是否已经存在你所需要的package因为网速问题,我们还是使用国内镜像,以免总是出现各种因为网速出现的问题方法是在“Manage Repositories”中,修改数据来源,默认的是“https://pypi.python.org/simple”,我们可将其替换为如下的几个数据来源,这些都是国内的pip镜像:清华:https://pypi.tuna.tsinghua.edu.cn/simple

数据结构——堆PTA习题_流楚丶格念的博客-程序员宅基地

文章目录单选题选择题题解编程题堆中的路径 --- 用数组建立堆代码7-1 关于堆的判断 (25分)输入格式:输出格式:输入样例:输出样例:代码单选题题号题目答案1堆的形状是一棵: 完全二叉树2创建一个初始堆,含有N个记录,其时间复杂度是: O(N)3已知关键字序列(5,8,12,19,28,20,15,22)是最小堆(小根堆),插入关键字3,调整后得到的最小堆是: 3,5,12,8,28,20,15,22,194哪种树,树中任何结点到根结点路

SPI-flash操作笔记_爱学习的小强子的博客-程序员宅基地

在STM32上,对于外部储存芯片,直接配置MCU和他们的引脚就可以了。W25Qxx一次擦除为一个扇区(4K),一次写入为1页(256字节,这个字节是最多的,也可以只写1字节)。SPI的自动地址增长,应该是只在这一页里面会自动增长,所以一次性最多写入的字节数为一页(256字节),然后就要将地址指针跳转到下一页去。(这是分析正点原子的源码得到的结论)。针对STM32自己本身自带的flash。写操作的时候,不能从flash执行代码或数据。(因为STM32的代码是可以直接在flash上执行的,也就是说可以不用

UML状态图和活动图_weixin_30758821的博客-程序员宅基地

UML状态图和活动图 统一建模语言UML(Unified Modeling Language)是非专利的第三代建模和规约语言。UML是一种开放的方法,用于说明、可视化、构建和编写一个正在开发的、面向对象的、软件密集系统的制品的开放方法。UML展现了一系列最佳工程实践,这些最佳实践在对大规模,复杂系统进行建模方面,特别是在软件架构层次已经被验证有效。 UML定义了5类,1...

matlab 传感器的迟滞,传感器的迟滞特性_Lay200的博客-程序员宅基地

传感器的迟滞特性迟滞特性表征传感器在正向(输入量增大)和反向(输入量减小)行程间输出-一输入特性曲线不一致的程度,通常用这两条曲线之间的最大差值△MAX与满量程输出F?S的百分比表示。迟滞可由传感器内部元件存在能量的吸收造成。接口传感器魏德米勒传感器/执行器接口产品,可以通过加装相应的总线协议适配器,SAI产品可以直接连接到现场总线。可以支持Profibus-DP、CANopen、DeviceNe...

推荐文章

热门文章

相关标签