vuejs形成计算属性

时间:2017-09-12 16:13:45

标签: vue.js computed-properties

我在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>

JS

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

operatingIncome的计算属性不会计算,除非我在revenue数据对象中明确创建expensesformData的属性,并将<input>更改为字符串插值。关于如何使这项工作的任何建议?

1 个答案:

答案 0 :(得分:2)

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,
    }
},