Отслеживание изменения состояния ребенка в Vue.js - PullRequest
Новая
       40

Отслеживание изменения состояния ребенка в Vue.js

1 голос
/ 20 апреля 2019

У меня есть компонент, цель которого - отобразить список элементов и позволить пользователю выбрать один или несколько элементов.

Этот компонент заполняется из внутреннего API и передается родительским компонентом с помощью props.

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

Явозможность отображать список и обрабатывать выборки с помощью v-on:click, но когда я установил selected=true, список не обновляется, чтобы отразить изменение состояния дочернего элемента.

Я предполагаю, что это происходит из-за изменения свойства дочерних элементовне отслеживаются Vue.js, и мне, вероятно, нужно использовать наблюдателя или что-то, но это не так.Это кажется слишком громоздким для тривиальной операции, поэтому я должен предположить, что я что-то упустил.

Вот полное воспроизведение: https://codesandbox.io/s/1q17yo446q

Нажав на План 1 или План 2, вы увидите этовыбирается в консоли, но не отображается в отображаемом списке.

Есть предложения?

1 Ответ

1 голос
/ 20 апреля 2019

В вашем примере vm является вычисляемым свойством.

Если вы хотите, чтобы оно было реактивным, вы должны объявить его заранее, пустым.
Подробнее здесь: реактивность в глубину .

Вот ваш пример , работающий .

В качестве альтернативы, если ваш member идет от родительского компонента, через propsData (т.е.: :member="member"), вы хотите переместить маппер с beforeMount в watch на member. Например: 

propsData: {
  member: {
    type: Object,
    default: null
  }
},
data: () => ({ vm: {}}),
watch: {
  member: {
    handler(m) {
      if (!m) { this.vm = {}; } else {
        this.vm = {
          memberName: m.name,
          subscriptions: m.subscriptions.map(s => ({ ...s }))
        };
      }
    },
    immediate: true
  }
}
...