Vue.js: update v-model value after triggering select change with jQuery

Question

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.

Community · Accepted Answer · 2017-05-23 12:01:52Z

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

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Nov 16, 2016 at 12:04

Luke Vincent

1,3233 gold badges20 silver badges36 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 00:55:01Z

1

You can try v-model.lazy for this:

<select v-model.lazy="model">

edited Jul 16, 2022 at 0:55

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 16, 2016 at 11:20

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

1 Comment

Luke Vincent Over a year ago

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.

Collectives™ on Stack Overflow

Vue.js: update v-model value after triggering select change with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related