VueJS: реактивный массив объектов - PullRequest
Новая
       27

VueJS: реактивный массив объектов

0 голосов
/ 01 февраля 2020

Это может звучать тривиально, но это не так. Итак, подведем итог:

  1. У нас есть массив объектов (изначально пустой), хранящихся в данных.
  2. Когда компонент создан, мы добавляем некоторые объекты в массив через пользовательские fabri c method.
  3. Метод Fabri c принимает базовый объект и расширяет его некоторыми дополнительными опорами.
  4. Один из реквизитов, добавленных методом fabri c, является ссылкой на данные (this.foo).

Проблема: результирующий объект не реагирует и не реагирует на изменение this.foo.

Демонстрация: https://codesandbox.io/s/vigilant-framework-47me6?fontsize=14&hidenavigation=1&theme=dark

Что я пробовал до сих пор:

  1. Использование хака для возврата нового Vue(...), чтобы сделать объект реактивным (https://github.com/vuejs/vue/issues/2660).
  2. Использование $set для установки дополнительных свойств в методе fabri c.

Итак, вопрос в том, как сделать объект реактивным?

PS Я знаю, что с помощью watchers / computed is вариант, но не в этом случае. Я хочу, чтобы объект был реактивным, а не обновлял вручную весь массив объектов.

1 Ответ

0 голосов
/ 01 февраля 2020

Ну, проблема в том, что когда вы делаете 

{ foo: this.foo }

, вы просто передаете фактическое значение, сохраненное в this.foo , в свойство foo новых объектов, которое равно 0 в момент создания экземпляра и вот как javascript работает с примитивными значениями.

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

Таким образом, вы можете определить свой атрибут foo в объекте данных следующим образом: 

foo: {val: 0}

Назначьте ваше значение в addProps следующим образом: 

{foo: this.foo}

и увеличьте значение следующим образом: this 

setInterval(() => this.foo.val++, 250);

Вот ваш код, измененный с помощью вышеуказанного https://codesandbox.io/s/vue-reactive-object-ybji5

Спасибо,

...