0

Проект расположил вот тут.

Есть объект

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

Jarry Roxwell
  • 934
  • «В data() добавляю свойство childs:this.layout.childs;» - неправильно. Вопросы для проработки допущенной ошибки: 1. На что указывает this в выражении значения свойства? 2. Допустимо ли использовать ; в литерале объекта? – yar85 Jul 14 '21 at 13:49
  • Возможный дубликат вопроса: Потеря контекста вызова – yar85 Jul 14 '21 at 13:54
  • @yar85 Подредактировал вопрос. Неправильно так делать или Вы про синтаксис. Если второй, то в проекте не так {childs:this.layout.childs;}. 1 this указывает на объект компонента, причем здесь потеря контекста? 2 не допустимо. – Jarry Roxwell Jul 14 '21 at 14:16
  • В том и дело, что this здесь не указывает на объект vue-компонента... в момент выполнения data, такого объекта еще не существует (равно как и объекта литерала, в котором объявлен метод data). Об этом написано и в официальной справке Vue, и в ответах по ссылке на связанный вопрос, комментом выше. Изучи, пожалуйста. А те два пронумерованных вопроса - они для самостоятельного изучения предмета ошибки, и последующей самопроверки: здесь на них отвечать не нужно, на них желательно ответить самому себе :) Второй оказался вызван опечаткой, так что остался только первый... – yar85 Jul 14 '21 at 14:34
  • @yar85 Со вторым вопросом разберусь, а вот с первым требуется помощь, линтер говорит, что указывает на CreateComponentPublicInstance. VUE только учу по этому если оставите ссылку ('Об этом написано и в справке Vue') будет здорово. – Jarry Roxwell Jul 14 '21 at 14:43
  • Помощь уже предоставлена выше (объяснения по ссылке, в ответах на слинкованный вопрос). А ссылка на страницу документации Vue - вот: Экземпляр Vue и диаграмма жизненного цикла (это первая глава учебника, если что). – yar85 Jul 14 '21 at 14:56

1 Answers1

0

В 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

Jarry Roxwell
  • 934