Set the vuetify v-autocomplete to a blank

2
votes

I have a vuetify v-autocomplete in a dialog box and it keeps the last value selected displayed. If I open the dialog, select a name and close the dialog the next time I open it it still displays the last selected value. 

         <v-autocomplete default="" placeholder="Type to search" :items="members" :item-text="getFullName" item-value="MemberID" :loading="loadingMembers" @change="changeMember"></v-autocomplete>

Is there a way that I can set it to blank when the dialog closes? I could probably reload the entire list of items but that seems a waste of resources since it fills with 3000 names

Thanks

1
vue.jsvuetify.js
I think that adding v-model="member_select", and after that in changeMember() this.member_select = '' should do the trick – ljubadr
If this doesn't work, try this answer. – ljubadr

1 Answers

3
votes

You can watch dialog model and set model autocomplete to null when dialog pass at false

Dialog

<v-dialog v-model="dialog">
  <v-card>
    <v-card-text>
        <v-autocomplete default="" v-model="memberSelected" placeholder="Type to search" :items="members" :item-text="getFullName" item-value="MemberID" :loading="loadingMembers" @change="changeMember"></v-autocomplete>
    </v-card-text>
  </v-card>
</dialog>

Javascript

watch: {
    dialog: function (val) {
      if(!val) {
         this.memberSelected = null
      }
    }
}