vuejs 表单计算属性答案

【问题标题】：vuejs form computed propertyvuejs 表单计算属性
【发布时间】：2018-02-21 04:47:16
【问题描述】：

我在 VueJS 中有一个简单的表单，我想为其中一个表单字段提供一个计算属性。我希望在用户输入数据时计算计算属性，然后在将表单提交到服务器之前将其保存为数据属性。

 <form>
    <div>
      <h3>Revenue</h3>
      <input type="text" v-model="formData.revenue">
    </div>
    <div>
      <h3>Expenses</h3>
      <input type="text" v-model="formData.expenses">
    </div>
    <div>
      <h3>Operating Income</h3>
      <input type="text" v-model="formData.operatingIncome">
    </div>    
  </form>

new Vue({
  el: '#app',
  data: {
    formData: {}
  },
  computed: {
    operatingIncome() {
      return this.formData.revenue - this.formData.expenses;
    }
  }
});

除非我在 formData 数据对象中显式创建 revenue 和 expenses 的属性并将 <input> 更改为字符串插值，否则不会计算 operatingIncome 的计算属性。关于如何使这项工作的任何建议？

【问题讨论】：

标签： vue.js computed-properties

【解决方案1】：

https://vuejs.org/v2/guide/reactivity.html

由于现代 JavaScript 的限制（以及 Object.observe 的废弃），Vue 无法检测到属性添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有响应性。

Vue 不允许将新的根级反应属性动态添加到已创建的实例中。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

声明formData 的可能子元素应该可以解决问题：

data: {
    formData: {
        revenue: null,
        expenses: null,
        operatingIncome: null,
    }
},

【讨论】：