Vue.js:如何在组件初始化时触发观察者函数 [英] Vue.js: How to fire a watcher function when a component initializes

问题描述

有时我需要调用一些函数来响应数据属性的变化.但是，我还需要该函数为 data 属性的初始值触发.

当组件初始化时观察器不会触发，因为被观察的属性在技术上还没有改变.所以，我最终将函数放在 methods 对象中，然后在观察者和 mounted 钩子中调用该方法.

这是一个例子:

new Vue({el: '#app',数据() {返回 {选择索引:0，}},方法: {焦点选择(){this.$refs.input[this.selectedIndex].focus();}},手表: {选择索引(){this.focusSelected();}},安装(){this.focusSelected();}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script><div id="应用程序"><div v-for="i in 4"><输入引用=输入"/><button @click="selectedIndex = (i - 1)">选择</button>

有没有办法在组件初始化时让观察者触发?

解决方案

Vue 中的观察者 可以选择提供 immediate 值:

<块引用>

在选项中传入immediate: true会立即触发当前表达式的值的回调

在这种情况下，您可以在 mounted 钩子中设置一个观察者:

new Vue({el: '#app',数据() {返回 {选择索引:0，}},安装(){this.$watch('selectedIndex', (i) => {this.$refs.input[i].focus();}, { 立即:真});}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script><div id="应用程序"><div v-for="i in 4"><输入引用=输入"/><button @click="selectedIndex = (i - 1)">选择</button>

<小时>

您还可以为 watch 对象中的观察者指定 immediate 选项，如下所示:

观看:{富:{立即:真实，处理程序(值){this.bar = 值；}}}

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:

Passing in immediate: true in the option will trigger the callback immediately with the current value of the expression

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:如何在组件初始化时触发观察者函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！