无法以编程方式在循环中重置 vuetify v-select答案

【问题标题】：Unable to reset vuetify v-select in loop programatically无法以编程方式在循环中重置 vuetify v-select
【发布时间】：2020-07-20 12:17:34
【问题描述】：

我正在循环生成 v-select，它工作正常。

我面临的唯一问题是，一旦我选择了某个值，就会发生一些操作，但之后我无法将下拉值重置为默认值或第一个值。

v-select 继续显示我选择的值并且不会被重置。我想手动重置它。

例如，如果我在下拉菜单中选择“反馈”，那么在执行该函数后，它应该重置为“选择”

我的代码：

<v-select v-if="item.actualStatus == 'complete'"
:items="getItems('completeItems')"
label="Select"
outlined
dense
v-on:input="takeAction($event, item)"
></v-select>

GetItems 函数：

getItems(type) {
  switch(type) {
    case 'completeItems':
      return this.completeItems
      break;
    }
},

数据函数中的CompleteItems

completeItems: [
        {text: 'Select',value: ''},
        {text: 'Call Events',value: 'completeCallEvent'},
        {text: 'Feedback',value: 'completeFeedback'},
        {text: 'Listen Audio',value: 'completeListenAudio'},
        {text: 'View Video',value: 'completeViewVideo'}
      ]

采取行动功能：

takeAction(event,item) {
      switch(event) {
        case 'completeFeedback':
          this.dialogFeedback = true
          this.feedbackCall(item)
          break;
    }

【问题讨论】：

只需在v-select 上使用v-model，当您想要重置时 - 将有界变量设置为 NULL。
v-model 的值正在重置，但下拉列表仍显示旧的选定值，请注意我在 for 循环中生成多个下拉列表

标签： javascript vue.js vuetify.js v-select

【解决方案1】：

这是一个如何重置选择的非常简单的示例。

new Vue({
el:'#app',
vuetify: new Vuetify(),
template: '<v-app><v-main><v-select v-model="selection" :items="completeItems" label="Select" outlined dense /><v-btn @click="selection = null">Reset</v-btn></v-main></v-app>',
data:
{
  selection: null,
  completeItems: [
        {text: 'Select',value: ''},
        {text: 'Call Events',value: 'completeCallEvent'},
        {text: 'Feedback',value: 'completeFeedback'},
        {text: 'Listen Audio',value: 'completeListenAudio'},
        {text: 'View Video',value: 'completeViewVideo'}
      ],
}
});

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app"></div>

【讨论】：