vue.js - 将 vuetify v-autocomplete 设置为空白

Question

我在对话框中有一个 vuetify v-autocomplete，它会保留显示最后选择的值。如果我打开该对话框，选择一个名称并在下次打开它时关闭该对话框，它仍然显示最后选择的值。

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

有没有办法可以在对话框关闭时将其设置为空白？我也许可以重新加载整个项目列表，但这似乎浪费资源，因为它填充了 3000 个名称

谢谢

Answer 1

您可以监视对话框模型，并在对话框传递为 false 时将模型自动完成设置为 null

对话框

<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
      }
    }
}