Блог

Главная - Вопросы по программированию - Vue.set реактивность не работает внутри дочернего компонента

Vue.set реактивность не работает внутри дочернего компонента

#vue.js

#vue.js

Вопрос:

 //1. working
changeColorType: function(e){
    this.$parent.activeIcon.type = e.target.value;
    this.$parent.$forceUpdate();
}   

//2. working
changeColorType: function(e){
    this.$parent.activeIcon = $.extend({}, this.$parent.activeIcon, {type: e.target.value})
}   

//3. not working
changeColorType: function(e){
    this.$parent.activeIcon.type = e.target.value;
}    

//4. not working
changeColorType: function(e){
    Vue.set(this.$parent.activeIcon, 'type', e.target.value);
}    

//5. not working
changeColorType: function(e){
    this.$parent.$set(this.$parent.activeIcon, 'type', e.target.value);
}

Я понимаю, почему 1. и 2. работает, 3. не работает;
Но я подумал, что 4. и 5. тоже должны работать!

Вопрос: Почему 4. и 5. не работают?

Комментарии:

1. Вы знаете, что этот прямой способ установки данных родительского компонента — очень плохая практика, верно? 🙂 vuejs.org/v2/guide/reactivity.html

2. Привет, Вовчиско, спасибо за ответ. Вы правы, это не очень хорошо. Но мне действительно любопытно, почему 3. и 4. не работают.

3. Попробуйте console.log(this.$parent, this.$parent.activeIcon) посмотреть, что внутри.

4. this.$parent.activeIcon = $.extend({}, this.$parent.activeIcon, {type: e.target.value}); этот код работает. Но я бы хотел, чтобы 3. и 4. работали.