Pre select multiselect box values

I have a vue component with a multiselect dropdown

<select name="roles[]" id="roles" class="form-control" multiple="multiple">
                     <option v-for="role in roles" :value="role.id">
                             {{ role }}
                      </option>
 </select>

A user can have many roles so I have a some props which hold the user (object), all roles (Array roleID => roleName), and selectedRoles( Array id of users current role(s) )

how can I preselect the roles the user currently has?

tykus

4 years ago

Best Answer

Level 104

Do you have a v-model attribute on the select element; for example, a separate piece of state selectedRoles holds the selections:

<select v-model="selectedRoles" id="roles" class="form-control" multiple="multiple">
	<option v-for="role in roles" :value="role.id">
		{{ role.name }}
	</option>
 </select>

This selectedRoles data is your initial state, and should pre-select the options.

Please or to participate in this conversation.