WhaleAlice
WhaleAlice
  • 发布:2021-03-06 15:59
  • 更新:2021-03-06 16:05
  • 阅读:4818

uniapp开发:data()数据无法及时更新到视图上

分类:uni-app

我的data()函数有返回一个如下的数据对象

data() {  
  return {  
    form: {}  
  }  
}

为了方便测试,我在视图上添加一个view标签,便于查看

<view>{{form}}</view>

最后我在某一个方法里面进行对数据form的操作

test: function() {  
  this.form.testData = '我就试一下';  
  console.log(JSON.stringify(this.form))  
}

结果是
console.log里面打印显示form已经被修改了,但是视图上的form还是显示{}

大伙怎么说^-^~

20210306 1611补充
1.如果将所需要测试的数据事先写好并设置初始值,利用this.form.testData更改值时是可以及时更新的,详情如下。但是会有一个弊端,如果表单的数据过多,事先佢维护这堆数据会有点麻烦。

data() {  
  return {  
    form: {  
      testData: '' // 此处将它设置为空白值  
    }  
  }  
}

2.20210306 HBuilderX更新之后就发现有这个问题的存在,利用uview组件进行表单开发,v-model双向绑定就出现以上描述的问题,没更新之前都是可以直接this.form.testData的方式进行数据更变并可以及时通过双向绑定反馈到视图上。

20210413 1441结贴
问题已经解决,在偶然的一次阅读vue文档的时候发现, vue有提及到vue视图不能监听到某种变化,详情请转至vue api文档https://cn.vuejs.org/v2/api/#Vue-set查阅

2021-03-06 15:59 负责人:无 分享
已邀请:
突然好想你

突然好想你

一般是这样写的 this.$set(this.form, "testData", "测试一下"); 这个好像是vue的问题,就是如果更新的不是字段,而是字段的子集就不会更新(也不是绝对的好像,但是set这个接口是vue提供的),如果这样写应该也是可以的 this.form = {testData: "测试一下"};

  • WhaleAlice (作者)

    这个确实可以,学到了~竟然还有这个方法☺

    2021-03-06 16:22

  • 深海智行

    回复 WhaleAlice: 也算不上问题吧,这个 vue 文档里有提到(观测限制部分),vue3 改用代理,应该能在一定程度优化

    2021-03-08 11:24

该问题目前已经被锁定, 无法添加新回复