Vue.js проблема с реактивностью ключей объекта добавленных $set
В объекте не обновляются свойства, добавленные с помощью this.$set.
Нажимаем кнопку init, в объект obj добавляется свойство key2 и это отображается на экране, но при нажатии кнопки change поле name обновляется, а объект нет. Не могу понять почему. Он ведь зависит от поля name.
https://jsfiddle.net/g7tcpnqm/
<div class="sample">
{{obj}}
<hr>
{{name}}
<hr>
<button class="btn btn-primary" @click="init">init</button>
<button class="btn btn-primary" @click="change">change</button>
</div>
<script>
new Vue({
el: '.sample',
data: {
obj: {
key: 'qwer'
},
name: 'asdf',
},
methods: {
init(){
this.$set(this.obj, 'key2', this.name);
},
change(){
this.name = this.name + 1;
},
}
});
</script>
Ответы (1 шт):
Автор решения: t0lik
→ Ссылка
Всё потому, что строки иммутабельны и выполняя this.$set(this.obj, 'key2', this.name) вы записываете копию строки в свойство объекта, а не просто ссылку на некий объект, поэтому изменение this.name уже не влияет на содержимое в this.obj.
Почитайте внимательно про тип данных string в JS и как он себя ведет в таких случаях.