У меня есть компонент флажка, который выглядит следующим образом (я опускаю html / styles):
<script>
export default {
props: {
value: {
required: true,
type: Boolean
},
label: {
required: false,
type: String
},
disabled: {
required: false,
type: Boolean,
default: false
}
},
data() {
return {
isChecked: this.value
}
},
methods: {
onChange() {
this.$emit('input', this.isChecked)
},
onFocus(event) {
this.isActive = true
this.$emit('focus', event)
},
onBlur(event) {
this.isActive = false
this.$emit('blur', event)
}
},
computed: {
classes() {
return [
{ 'is-checked': this.isChecked },
{ 'is-disabled': this.disabled }
];
}
},
watch: {
value: {
handler: function(value) {
console.log('value watcher')
this.isChecked = !!value
},
deep: true,
immediate: true
}
}
}
</script>
В другом компоненте у меня есть список граждан, который представляет собой массив объектов. Поэтому я отрисовываю его, и когда пользователь выполняет какое-либо действие, мне нужно программно установить значение флажка.
Вот как это выглядит:
deselectSelectedCitizen() {
let index = this.foreignCitizensCopy.findIndex(citizen => citizen.id === this.selectedCitizen.id)
let citizen = _.cloneDeep(this.foreignCitizensCopy.find(citizen => citizen.id === this.selectedCitizen.id))
citizen.checked = false
// Here I tried different methods, like
// let citizen = this.foreignCitizensCopy.find(citizen => citizen.id === this.selectedCitizen.id)
// this.$set(citizen, 'checked', false)
// This one is just rough changing of array
this.foreignCitizensCopy.splice(index, 1)
this.foreignCitizensCopy.push(citizen)
// Also tried to use $set both for "citizen" and for the whole array, updating object
// this.$set(this.foreignCitizensCopy, index, citizen)
// In any cases the array did changed, but it does not call checkbox's watcher
console.log(_.cloneDeep(this.foreignCitizensCopy))
this.selectedCitizen = null
},
Итак, я попробовал разные методы, и во всех случаях атрибут checked
в массиве foreignCitizensCopy
изменился, однако наблюдатель в моем компоненте флажка не сработал.
Я подозреваю, что с флажком что-то не так, но не могу понять, что именно