vue.js :selected doesn't triggering @change event select/option

Question

I have prop "cat"

props: ['cat1'],

Ant this piece of code

<select class="form-control" @change="set_category">
   <option value="" disabled>Please select category</option>

   <option v-for="category in categories"
          :value="category" 
          :selected="cat1 == category.url">{{ category.name}}
   </option>
</select>

So this code is called when page its loading and the problem is, that after loading the page option changes but it doesn't triggers @change event, ant because of it i can't actually track which option was selected on page load. I tried alot versions with v-model ant etc but it sees i just stuck on it..

So you want to change cat1 when the user selects an option? — Quoc-Anh Nguyen
– Quoc-Anh Nguyen, Commented Sep 24, 2017 at 3:07
@RichardMatsen set_category method for the moment have only console.log('test') for debuging What i want to do, when page loads this code its called in the prop cat1 i have part of the url and in the :value="category" i actually have whole object... because cat1 comes from back-end i actually wanna to check if they equal to each other, I mean url from category object (category.url) and url from the prop "cat1". And it they are.. then i want to bind it via set_category method or using any other approach... — Sillexx
– Sillexx, Commented Sep 24, 2017 at 3:39
Sorry no luck. The only option I can see is to bind select to cat1 with v-model, then set a watch on cat1 that calls set_category. — Richard Matsen
– Richard Matsen, Commented Sep 24, 2017 at 6:15

c6p · Accepted Answer · 2017-09-24 09:14:19Z

1

Richard Matsen's answer is great. But if you only want to track value on page load, why not just call it on created (or mounted).

created() {
  this.set_category();
}

Here is a jsfiddle:

edited Sep 24, 2017 at 9:14

answered Sep 24, 2017 at 9:08

c6p

3433 silver badges12 bronze badges

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

Comments

Richard Matsen · Accepted Answer · 2017-09-24 08:47:24Z

Here's a directive that will emit the change event as required

Vue.directive('binding-change', {
  update: function (el, binding, vnode) {
    const model = vnode.data.directives.find(d => d.name === 'model')
    if (model) {
      binding.value(model.value)
    }
  }
})

Use it like this

<select class="form-control" v-binding-change="set_category" v-model="cat1">
   <option value="" disabled>Please select category</option>
   <option v-for="(category, index) in categories"
      :key="index"
      :value="category" 
   </option>
</select>

methods: {
  set_category (newValue) {
  }
}

I haven't tried it with a prop (just a local variable), but I can say it emits the change event when the bound variable is changed in the background (unlike @change).

Collectives™ on Stack Overflow

vue.js :selected doesn't triggering @change event select/option

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related