Мне нужно динамически добавлять новые свойства к данным, поэтому я использую this.$set для отслеживания Vue этих новых данных. Большая часть кода, использующего this.$set, работает нормально, но один из них создает неожиданное поведение.
Предположим, у меня есть компонент component, который сначала содержит данные a = {}.
Затем я нажимаю кнопку, чтобы добавить новое свойство b в a. Я использую this.$set(a, b, {value: 123}), чтобы Vue отслеживал значение a.b. Однако, когда существует более одного компонента или создается новый компонент, значение a.b дублируется для всех компонентов. Поэтому, когда я обновляю или удаляю его значение для одного компонента, оно применяется ко всем компонентам.
Я пытался сделать ключ b уникальным (например, a.b-comp1, a.b-comp2, a.b-comp3) для всех компонентов. разные компоненты но не везет. Кроме того, если я добавлю другое новое свойство к одному компоненту, оно добавит ко всем компонентам. Я вижу результат примерно так:
a: {
b-comp1: 123,
b-comp2: 234,
b-comp3: 345,
c-comp2: 123,
d-comp3: 345
}
Вот исходный код в JSFiddle . Проблема существует, когда я использую меню. У меня нет проблем с использованием речи и аудио, которые похожи на меню. Нажмите на нижний правый знак плюс, чтобы добавить новые свойства.