Search code examples
javascriptvue.jsvuetify.jsdropdown

Get selected value on change

I am using v-select/v-autocomplete:

<v-autocomplete
    v-modal="newRole"
    :items="roles"
    label="--Change role--"
    required
    return-object
    item-value="id"
    item-text="name"
    @input="changeRole(row.id, newRole)"
    @blur="$v.form.roles.$touch()"
   >
    </v-autocomplete>

On changing the value of the dropdown I want to get the selected value, but I am getting undefined.

export default {
data() {
    return {
        roles:[{name: 'Admin', id:'1'}],
        newRole:null,
    }
   },
 methods: {
  changeRole(id, selected){
   alert(selected)
 },
}

Can someone please help me with this!

Solution

  • There is a typo in your autocomplete:

    Change this v-modal="newRole" -> v-model="newRole"

    I guess that's it.