文章/答案/技术大牛

发布

社区首页 >问答首页 >无法以编程方式重置vuetify v-select in loop

问无法以编程方式重置vuetify v-select in loop
EN

Stack Overflow用户

提问于 2020-04-08 14:41:36

回答 1查看 527关注 0票数 1

我正在生成v-select in循环，它工作得很好。

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

V-选择keep继续显示我选择的值，但未重置。我想手动重置它。

例如，如果我在下拉列表中选择"Feedback“，那么在函数执行后，它应该重置为" 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函数：

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

javascript

vue.js

vuetify.js

v-select

回答 1

Stack Overflow用户

发布于 2020-04-10 20:28:00

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

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61094715

复制

相似问题

问无法以编程方式重置vuetify v-select in loop
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法以编程方式重置vuetify v-select in loopEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法以编程方式重置vuetify v-select in loop
EN