Vue v-model doesn't trigger with third party dropdowns

Question

I have a select element defined as

<select v-model="mySelectValue">
    <option v-for=...>...</option>
</select>

If used as is, mySelectValue is updated correctly when the user changes the select input.

Now I want to style the input. I tried Selectize.js :

$('select').selectize();

The select input is now using the new look and functionality but changing the value doesn't update mySelectValue . I thought that the original select input would get updated with Selectize.js so I tried Dropdown.js . Same thing.

Using jQuery I hooked a on change listener to the original select input:

$('#mySelect').change(function() { 
    console.log($(this).val()); 
});

Using either of those two libraries I see the change event triggered and the original select input updated.

Why isn't Vue updating mySelectValue ?

Answer 1

You should add a value attribute to <option>

<select v-model="mySelectValue">
   <option value='1'>one</option>
   <option value='2'>two</option>
   <option value='3'>three</option>
</select>