问题描述
Sometimes I need to call some function in response to a change in a data property. But, I also need that function to fire for the initial value of the data property.
The watcher does not fire when the component initializes since the property being watched technically hasn't changed yet. So, I end up putting the function in the methods
object, and then calling that method in the watcher and the mounted
hook.
Here's an example:
new Vue({
el: '#app',
data() {
return {
selectedIndex: 0,
}
},
methods: {
focusSelected() {
this.$refs.input[this.selectedIndex].focus();
}
},
watch: {
selectedIndex() {
this.focusSelected();
}
},
mounted() {
this.focusSelected();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-for="i in 4">
<input ref="input"/>
<button @click="selectedIndex = (i - 1)">Select</button>
</div>
</div>
Is there a way for me to be able to have the watcher fire when the component initializes?
Watchers in Vue have an option to provide an immediate
value:
In this case, you could set a watcher in the mounted
hook:
new Vue({
el: '#app',
data() {
return {
selectedIndex: 0,
}
},
mounted() {
this.$watch('selectedIndex', (i) => {
this.$refs.input[i].focus();
}, { immediate: true });
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-for="i in 4">
<input ref="input"/>
<button @click="selectedIndex = (i - 1)">Select</button>
</div>
</div>
You could also specify the immediate
option for a watcher in the watch
object like so:
watch: {
foo: {
immediate: true,
handler(value) {
this.bar = value;
}
}
}
这篇关于Vue.js:如何在组件初始化时触发观察器函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!