[Vuejs]-Default Select Option is Multiple Select is not visibly selected. (VueJs3)

by

0👍

When using v-model with select input, don’t use selected attribute to set a default value for your select input.

If you’re setting the value for each option by selectedOption.id then simply type the id of the option you would like it to be visible in formData.replyMethod.

For example:

const selectOpts = [{ id: 1, name: 'files.placeholder'}];

const formData =  {
    replyMethod: 1,
};
<select v-model="formData.replyMethod">
  <option v-for="option in selectOpts" :value="option.id">
    {{ option.text }}
  </option>
</select>

This will set an initial value for your input on component mount which will be overridden upon the user action (Same behavior as selected attribute)

Leave a comment