VUE 直接通过JS 修改html对象的值导致没有更新到数据中解

tValueChange(var1, var2, var3, varTotle){

var num1 =isNaN(var1) ?0 :Number(var1);

  var num2 =isNaN(var2) ?0 :Number(var2);

  var num3 =isNaN(var3) ?0 :Number(var3);

  var avg =Math.round(((num1 + num2 + num3) /3) *100) /100;

  this.$set(this.jiyanData, varTotle, avg)

},

本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法。分享给大家供大家参考，具体如下：

业务场景

我们在使用vue 编写 代码时，我们有一个 多行文本框控件，希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据。

发现插入 这个数据后，这个数据并没有同步到 数据中，但是直接通过键盘输入，就可以改变数据。

原因分析

在通过 JS 修改控件的value 数据后，并没有触发到数据更新。

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

所以，解决方法就是用 Vue.set 来代替直接赋值

this.$set(this.tableData, this.currentRow, this.popupData)

https://segmentfault.com/a/1190000019470488?utm_source=sf-similar-article

https://www.jb51.net/article/175558.htm