CODEWITHSUNDEEP
vue.jsvuejs2vue-component
A.M.Roomi
A.M.Roomi

Reputation: 123

Fire Event When Model Value Change in Vue JS

I have a simple drop down like this:

<select v-model="selected.applicationType"
        v-on:change="applicationTypeChanged"
        class="form-control">
    <option v-for="item in applicationTypes"
            v-html="item.text"
            v-bind:value="item.value"></option>
</select>

The drop down is bound to a model and change event is also working as expected. But programatically I am changing the value of selected.applicationType and then I need to fire the change event of the drop down. How can I fire change event when model value is changed?

Upvotes: 0

Views: 702

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

You can use a watcher for this

<select v-model="selected.applicationType" class="form-control">
    <option v-for="item in applicationTypes"
            v-html="item.text"
            v-bind:value="item.value"></option>
</select>

export default
{
  data()
  {
    return {
      selected:
      {
        applicationType: null
      }
    }
  },
  watch:
  {
    'selected.applicationType'(newVal)
    {
      this.applicationTypeChanged(newVal);
    }
  },
  methods:
  {
    applicationTypeChanged(newValue)
    {
      ...
    }
  }
}

Upvotes: 2

Related Questions