Vue.js: How to fire a watcher function when a component initializes

Question

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?

tony19 · Accepted Answer · 2022-07-15 19:46:31Z

62

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;
    }
  }
}

edited Jul 15, 2022 at 19:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 27, 2017 at 14:40

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Charlie Harding Over a year ago

Note that the second solution will be fired when the component is created, but before it is mounted

SimonSimCity Over a year ago

The code above is written for vue2. Here are the docs for vue3: vuejs.org/api/component-instance.html#watch

Collectives™ on Stack Overflow

Vue.js: How to fire a watcher function when a component initializes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related