Question

我有一个计算字段，该字段根据调查表中是否填写了文本字段来设置名为“ completed”的数据属性：

setCompleted: function () {
            this.completed = this.required && this.textAnswer !== '';
    },

此计算未在我的html中引用，仅用于设置completed属性。可以由于用户输入而改变的唯一属性是textAnswer，绑定为文本输入上的模型。

我设置了一个空的监视程序来监视此计算字段，如下所示：

setCompleted: function () {
    },

有了手表，它可以工作并且可以执行setCompleted更新，但是如果没有手表，则在调试时setCompleted不会被命中，并且完全无法更新。

我的问题是- 当其中使用的字段更新时，如何观看计算所得的内容使其更新？ Vue可以通过监视设置监视计算所得的每个属性进行更改，然后在一个更改时运行计算？

注意-我知道我可以将其重构为监视textAnswer并从该监视中调用方法以完成更新，但是我想知道此代码实际上是如何工作的，是否是不良做法或实际上是打算允许的事情与Vue。

Answer 1

我认为计算属性的做法是返回观察者可以观察的值。在这种情况下，完成的将是计算值。

computed: {
  completed: function () {
     return this.required && this.textAnswer !== '';
  },
},
watch: {
  completed: function(val) {
    console.log(val)
  }
}

Answer 2

有帮助吗？

但是，区别在于计算的属性基于在他们的依赖。计算属性仅在以下情况下重新评估它的某些依赖项已更改。

摘自文档：https://vuejs.org/v2/guide/computed.html

根据我的经验，只要观察者返回一个值，它就会重新评估内部使用的属性何时发生更改，它会检查该值是否发生更改。

Vue JS-观看计算所得的字段中的字段更新时如何触发它？

2 个答案: