vuejs формирует вычисляемое свойство

У меня есть простая форма в 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 и expenses в объекте данных formData и не изменяю <input> на строковую интерполяцию. Есть предложения о том, как заставить эту работу работать?


vue.js computed-properties
person Vince    schedule 12.09.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

Из-за ограничений современного JavaScript (и отказа от Object.observe) Vue не может обнаруживать добавление или удаление свойств. Поскольку Vue выполняет процесс преобразования геттера / сеттера во время инициализации экземпляра, свойство должно присутствовать в объекте данных, чтобы Vue преобразовал его и сделал реактивным.

Vue не позволяет динамически добавлять новые реактивные свойства корневого уровня к уже созданному экземпляру. Однако можно добавить реактивные свойства к вложенному объекту с помощью метода Vue.set(object, key, value).

Объявление возможных подэлементов formData должно помочь:

data: {
    formData: {
        revenue: null,
        expenses: null,
        operatingIncome: null,
    }
},
person ceejayoz    schedule 12.09.2017