Как запустить vue lifecycle-events для каждого экземпляра компонента?

Question

У меня есть vue-компонент, состоящий из нескольких экземпляров одного и того же дочернего компонента.Некоторые из этих дочерних компонентов отображаются только при условии.Моя проблема заключается в том, что когда условие if превращается в ложное, как уничтоженные методы, так и методы beforeDestroy вызываются только один раз (для последнего дочернего компонента, который должен быть уничтожен), но не для всех подключенныхдочерние компоненты.Есть ли способ изменить это поведение и добиться, чтобы уничтоженный метод вызывался для каждого уничтоженного экземпляра?

Я создал скрипку для лучшего понимания: при переходе от «Предусловия 1» к «Предусловию 2» я быожидаем, что метод destroy для обоих, "instance 1", а также "instance 2", будет запущен.Но консоль показывает только выполнение метода для экземпляра 2. При переключении обратно на «Предварительное условие 1» событие уничтожения вообще не всплывает, но я ожидаю, что он будет вызван, например, для 3.

Here is the fiddle:
https://jsfiddle.net/5chq02zs/2/

Я также пытался заменить «уничтожено» на «beforeDestroy» или «деактивировано», но результат остался прежним.Может кто-то указать мне верное направление?Спасибо.

Answer 1

Добавить key="id" к элементам.

    <my-component v-if="picked == 'true'" id="1" :key="1">
      instance 1
    </my-component>
    <my-component v-if="picked == 'true'" id="2" :key="2">
      instance 2
    </my-component>
    <my-component v-if="picked == 'false'" id="3" :key="3">
      instance 3
    </my-component>