vue: как сделать объект переданным компоненту реактивным?

Question

Codepen Demo

У меня есть компонент, который имеет location объект как props. Я передал аргумент locations[index], который является выбранным элементом из массива locations.

Однако компонент не может реагировать при изменении index. Как видно из демонстрации, JSON изменяется при нажатии кнопки, но компонент не может обновляться.

Какой лучший способ сделать компонент реактивным?

Answer 1

Ваш компонент location заполняет свойства данных province и city только в хуке mounted. При изменении реквизита location хук mounted больше не будет вызываться, поэтому у вас останутся устаревшие данные.

Вместо этого используйте вычисляемое свойство:

computed: {
  province() {
    return this.location.province;
  },
  city() {
    return this.location.city;
  }
}

Обновленная кодовая ручка

Если вам действительно требуются province и city в качестве свойств данных (а не вычисляемых свойств), тогда вам нужно будет посмотреть реквизит location для обновления свойств:

data() {
  return {
    province: null,
    city: null
  }
},
watch: {
  location: {
    immediate: true,
    handler(loc) {
      this.province = loc.province;
      this.city = loc.city;
    }
  }
}