uni-app uni-data-select的value问题

uni-app uni-data-select的value问题

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

操作步骤：

<uni-data-select :localdata="a.c" v-model="a.b" @change="getValue"></uni-data-select>

预期结果：

change：1/2/3

实际结果：

change：null/1/2

bug描述：

Vue2环境： 【uni-data-select】

localdata设为a.c，其中有三个对象：

{ value: 1, text: "1" },
{ value: 2, text: "2" },
{ value: 3, text: "3" }

@change打印this.a.b

在使用uni-data-select时，双向绑定了对象a中的b属性。使用@change事件选择了下拉框里的1，但是b属性没有更新，仍然为空，再次选择任意值（1,2,3），b属性更新为1。再次选择任意数字，b属性更新为上一次选择的值。


更多关于uni-app uni-data-select的value问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

那就在change里重新给 绑定的数据赋值

更多关于uni-app uni-data-select的value问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢你！解决了

这是一个典型的Vue2响应式数据绑定问题。在Vue2中，直接修改对象属性时需要使用Vue.set或this.$set方法才能触发响应式更新。

在你的代码中，a.b是通过v-model绑定的，但a对象可能没有预先定义b属性，导致Vue无法追踪这个属性的变化。建议修改为以下两种方案之一：

  1. 预先定义b属性：
data() {
  return {
    a: {
      b: null,
      c: [...]
    }
  }
}
  1. 使用$set方法：
<uni-data-select 
  :localdata="a.c" 
  :value="a.b"
  [@change](/user/change)="val => $set(a, 'b', val)"
></uni-data-select>
回到顶部