Свойства модели VueJS не являются обязательными, если их нет в исходном списке свойств

Question

В VueJs, если у объекта, который есть в моем data, есть свойство со значением по умолчанию, оно будет правильно связываться, когда я манипулирую им. Однако, если я позже установлю новое свойство, это новое значение не будет связываться.

Лучший способ объяснить это на следующем примере: https://jsbin.com/kahaxocohu/edit?html,js,output

Если я введу значения для make (Honda, Toyota и т. Д.), DOM обновится должным образом,Однако, если я введу значение для year, это значение не будет отображено чуть выше его внутри div.

Если бы вместо этого я изменил объект по умолчанию на следующее, оба свойства make и year будут связываться правильно: car: { make: 'Honda', year: '2012' }.

Answer 1

Чтобы ваш первый пример реагировал, у свойства данных должны быть методы getter и setter. Вы можете прочитать об этом здесь .

Вкратце, если ваши данные выглядят так:

data() {
  return {
    car: {
      make: '',
    },
  },
},

и вы хотите добавить свойство year в качестве реактивных данныхвам нужно установить его где-то (например, в подключенном хуке)

mounted() {
  this.$set(this.car, 'year', 2012)
},

рабочий пример

Но, если честно, когда вы знаете, какие свойства вам нужны, добавьтеих к вашим данным в начале.

data() {
  return {
    car: {
      make: '',
      year: '',
    },
  },
},

Answer 2

Это не ошибка. Однако это распространенная ошибка для пользователей, которые являются новичками в Vue, особенно для пользователей с угловым фоном.

При инициализации Vue добавляет реактивные геттеры и сеттеры к каждому свойству вОбъект data экземпляра Vue. Однако Vue не может настроить реактивные геттеры и сеттеры для свойств, которые не существуют.

Если вы хотите, чтобы свойство было реактивным, оно должно быть инициализировано значением по умолчанию:

var app = new Vue({
    el: '#app',
    data: {
        car: {
            make: '',
            year: ''
        }
    }
});