2

HTML:

<select v-model="model">
    <option hidden disabled v-bind:value="false" selected>Placeholder</option>
    <option v-for="item in array" v-bind:value="item.id"> @{{ item.name }}</option>
</select>

I have a select much like the above and I'm using some jQuery to update the select box. I can't however seem to update the v-model to align with the jQuery change.

jQuery:

.on('mousedown', '.class', function (evt) {
    evt.preventDefault();
    $(this).find('option:first').prop('selected', true).val(false).change();
});

The jQuery here listens for a mousedown event on a clear button which selects the placeholder option i.e. resetting the select box. However I was hoping .val(false).change() would be enough to trigger the v-model to update - it was not.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Luke Vincent
  • 1,266
  • 2
  • 19
  • 35

2 Answers2

2

Doing plenty more research since posting this I stumbled upon this stackoverflow question.

It's a problem with jQuery change event not firing native listeners.

To solve this problem I added a snippet based on the top voted answer found through that link.

evt.preventDefault();
$(this).removeClass('x onX').find('option:first').prop('selected', true);

let el = $(this).get(0);
let event = document.createEvent('Events');
event.initEvent('change', true, false);
el.dispatchEvent(event);
Community
  • 1
  • 1
Luke Vincent
  • 1,266
  • 2
  • 19
  • 35
1

You can try v-model.lazy for this:

<select v-model.lazy="model">
tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • Vue automatically knows to look for change events when v-model is added to a select box. So `.lazy` is only really necessary when used with say an `input`. I have tried this however and as expected it just gives the same result. – Luke Vincent Nov 16 '16 at 11:29