Обновленные данные не спускаются в дочерний компонент, Vue
Есть родительский компонент Question.vue, который пробрасывает параметры дочернему RadioButtons.vue. Дочерний компонент содержит список радио-кнопок. Можно выбрать только одну. По событию выбора радио-кнопки пробрасывается событие наверх с новым массивом checked, который состоит из одного выбранного элемента. Событие пробрасывается, данные в родителе обновляются, но они не спускаются обновленные в дочерний компонент. Генерируется ошибка: Computed property "checkedElement" was assigned to but it has no setter. При этом отмеченными остаются несколько радио-кнопок.
Question.vue
<section>
<h2>Вопрос</h2>
<component
v-bind:is="'radioButton'"
v-bind:list="['a','div', 'span', 'i']"
v-bind:checked="checked[questionNumber-1]"
v-on:change-checked="onCheckItem">
</component>
</section>
export default {
data() {
return {
checked: []
}
},
components: {
radioButton: Radio
},
methods: {
onCheckItem(response){
this.checked[this.questionNumber-1] = response;
}
},
created(){
for(let i=0; i<this.maxNumber; i++){
this.checked.push([])
}
}
}
RadioButtons.vue
<template>
<form>
<p>Выбраны: {{checked }}</p>
<div v-for="item in list">
<input type="radio" v-on:change="onInput" v-bind:value="item" v-model="checkedElement"/>
<label>{{ item }}</label>
</div>
</form>
</template>
export default {
props: ['list', 'checked'],
computed: {
checkedElement() {
return this.checked[0] ? this.checked[0] : ''
}
},
methods:{
onInput(e){
this.$emit('change-checked', [e.target.value]);
}
}
}
Меняю вычисляемое свойство checkedElement в дочернем компоненте:
checkedElement: {
get: function(){
return this.checked[0] ? this.checked[0] : ''
},
set: function(){
}
}
Ошибки уже нет. Но обновленные данные по-прежнему не спускаются в дочерний компонент. Что я делаю не так?
Ответы (1 шт):
Вы не учли особенности VueJs в плане реактивности, в некоторых случаях нужно менять свойства объекта или элемент массива немного по-другому, см. Change detection caveats
Нужно заменить
this.checked[this.questionNumber-1] = response;
на
Vue.set(this.checked, this.questionNumber-1, response)
// или
this.checked.splice(this.questionNumber-1, 1, response)