Question

我正在循环生成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;
    }

Answer 1

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

new Vue({
el:'#app',
vuetify: new Vuetify(),
template: '<v-app><v-content><v-select v-model="selection" :items="completeItems" label="Select" outlined dense /><v-btn @click="selection = null">Reset</v-btn></v-content></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>

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

1 个答案: