Есть объект
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
data()
добавляю свойствоchilds:this.layout.childs;
» - неправильно. Вопросы для проработки допущенной ошибки: 1. На что указываетthis
в выражении значения свойства? 2. Допустимо ли использовать;
в литерале объекта?{childs:this.layout.childs;}
. 1this
указывает на объект компонента, причем здесь потеря контекста? 2 не допустимо.this
здесь не указывает на объект vue-компонента... в момент выполненияdata
, такого объекта еще не существует (равно как и объекта литерала, в котором объявлен методdata
). Об этом написано и в официальной справке Vue, и в ответах по ссылке на связанный вопрос, комментом выше. Изучи, пожалуйста. А те два пронумерованных вопроса - они для самостоятельного изучения предмета ошибки, и последующей самопроверки: здесь на них отвечать не нужно, на них желательно ответить самому себе :) Второй оказался вызван опечаткой, так что остался только первый...CreateComponentPublicInstance
. VUE только учу по этому если оставите ссылку ('Об этом написано и в справке Vue') будет здорово.