Реакивность VUE или как следить за обьтектом

Question

Есть объект

let layout = {
  childs: [
    {
      id: "gdy49639292",
      type: "Place",
      mess: "hello"
    },
    ...
  ],
  add: function (obj: Place) {
    this.childs.push(obj);
  }
};

Этот объект рендерит vue. У приложения есть метод @app add который вызывает метод @obj add объекта.

В data() добавляю свойство

data(){
  return {  childs:this.layout.childs };
}

и таким образом рендерится компонент:

<Place
  v-for="data in  childs"
  :key ="data.id"
  :data="data"
></Place>

По нажатию на кнопку вызывается метод @app add:

add() {
  let new_components = this._createComponent();
  this.layout.add(new_components);
}

При этом новый элемент доступен и у @app childs, но новый элемент не рендерится. Тк объекты у vue проксируются, так понимаю не вызывается сетер. Как добиться того что бы новые объекты рендерились?

Так работать будет:

this.childs = Object.assign({}, this.layout.childs);

так же, как и если повесить счетчик на компонент, но так не надо.

Добавляю новые элементы с помощь метода объекта @obj add тк он будет еще нужен для дальнейшей работы с ним вне приложения vue

Answer 1

В data() надо присваивать не дочерние элементы, а сам объект:

data(){
  return {  obj:this.layout }; // [old]: return {  childs:this.layout.childs };
}

соответственно, рендер немного измениться:

<Place
  v-for="data in obj.childs" // [old]: v-for="data in  childs"
  :key ="data.id"
  :data="data"
></Place>

В дальнейшем как советует документация:

Хорошей практикой будет никогда не сохранять ссылку на оригинальный объект и работать только с реактивной версией.

Измениться метод @app add:

add() {
  let new_components = this._createComponent();
  this.obj.add(new_components); // [old]: this.layout.add(new_components);
}

После того как приложение выполнило свою функцию экспортировать объект.

Добавляю новые элементы с помощь метода объекта @obj add тк он будет еще нужен для дальнейшей работы с ним вне приложения vue

БЛОГ НА HUSL

Реакивность VUE или как следить за обьтектом

Ответы (1 шт):