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

Posted 2023-02-22

【中文标题】无法以编程方式在循环中重置 vuetify v-select

【英文标题】：Unable to reset vuetify v-select in loop programatically

【发布时间】：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 循环中生成多个下拉列表

【参考方案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>