vue.js中的Watcher不会收到值
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js中的Watcher不会收到值相关的知识,希望对你有一定的参考价值。
Im正在使用观察者来更新组件Persons.vue中的值,一旦数组Im从App.vue传递到Persons.vue作为道具变化。我可以使用选项列表更新道具时,它可以正常工作并进行更新。但是,一旦Im使用日期选择器设置新日期,保存在proppersonData中的数组就会在控制台日志中正确更新,但在观察程序中不会收到。
解决此问题的任何提示都非常感激!
这是基于更大应用程序的虚拟代码设置,但希望您能解决此问题。
App.vue
<template>
<div id="app">
<select @change="person($event)">
<option :value="selectionOne">One</option>
<option :value="selectionTwo">Two</option>
</select>
<flat-pickr v-model="initDate" :config="config" @on-change="changeTime"></flat-pickr>
</div>
</template>
如果我先更新人员,则将值正确发送给观察者,但是如果此后我通过更改日期来运行changeTime函数,则不会将值发送给观察者。>
data() { return { selected: "selectionOne", selectionOne: "selectionOne", selectionTwo: "selectionTwo", personOne: [{ firstName: "XX" }, { born: "XXXX" }], personTwo: [{ firstName: "YY" }, { born: "YYYY" }], personData: [] }; }, created() { this.personData = [{ firstName: "XX" }, { born: "XXXX" }]; }, methods: { // if I start with updating the person the value is sent to the watcher correctly person(e) { this.selected = e; this.updateSensorvalues(e); }, // but if I after that is running the changeTime function by changing the date the value is not sent to the watcher changeTime(selectedDates) { this.born = this.timeFormatter(selectedDates[0]); this.updateNames(this.selected); }, updateNames(e) { this.selected = e; let selection = e.target.value.split(","); if (selection == "selectionOne") { this.personData = this.personOne; // updating the second position with new born object this.personData[1] = { born: this.born }; } if (selection == "selectionTwo") { this.personData = this.personTwo; this.personData[1] = { born: this.born }; } console.log(this.personData) } } };
Persons.vue
export default {
name: "Persons",
props: {
personData: {
type: Array
}
},
watch: {
personData: {
deep: true,
immediate: true,
handler(newValue) {
try {
console.log("newValue", newValue);
} catch (err) {
console.log("no data yet ...");
}
}
}
}
};
</script>
I会在使用vue时使用观察程序来更新组件Impersons中从App.vue传递到Persons.vue的数组Im,以更新组件Persons.vue中的值。当Im ...
答案
尝试像这样使用this.$set
:
以上是关于vue.js中的Watcher不会收到值的主要内容,如果未能解决你的问题,请参考以下文章
当根组件中的值更改时,子组件中的 Vue.js props 值不会更新