如何拿到x-address里面的字符串而不是id

最新推荐文章于 2023-08-01 15:29:03 发布

原创最新推荐文章于 2023-08-01 15:29:03 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#x-address #vux

vux 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用VUX的x-address组件实现自定义地址返回功能，避免默认返回ID的问题，通过on-shadow-change事件获取完整的地址名称，并提供地址选择验证的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的vue项目是产品线上的,比较赶，有个地址输入选择的，我直接使用了vux的x-address，安装vux我就不多说了，网上很多教程，x-address挺好用的，直接引进来就可以，但是吐槽一下在移动端适配的时候样式修改很难哎，进入正题，我们在官网上也可以看到，点击选择完地址之后，返回的值默认是绑定id的，就是比如说，

在v-model绑定的值就是一串id,但是我们要求发给后台的是北京市市辖区东城区，所以我一直在想是不是要去哪里遍历数组拿到对应的值，其实不用，仔细看问题有一个函数，

我们直接绑定这个函数，

      <X-address :list="addressData" title="请选择您的地址:"  @on-shadow-change="onShadowChange"></X-address>

 methods: {
      onShaowChange(ids,names) {
     console.log(ids,names)   
     this.address =names;
      },

此时这个names就是我们要获取的地址信息，切记不要加v-model双向数据绑定了，直接赋值就好，不然又会被覆盖掉。还有说下那个函数，我在做输入值校验的时候，如何判定用户有没有选择了地址，如果单是从names==undefine是不行的，我是通过他显示在页面上的内容是否为空来做判断的，

var isChooseAddr=document.querySelector(".vux-popup-picker-value");//拿到页面上类名的内容，如果有地址显示说明拿到  
if(isChooseAddr==null){this.toastMsg("请选择您的地址")}

上面基本完成了，弹出框的内容是我写的一个函数，我就不介绍了。