Невозможно сбросить vuetify v-select в l oop программно - PullRequest
Новая
       24

Невозможно сбросить vuetify v-select в l oop программно

1 голос
/ 08 апреля 2020

Я генерирую v-select в l oop, он работает нормально.

Единственная проблема, с которой я сталкиваюсь, состоит в том, что, как только я выбираю какое-то значение, происходит какое-то действие, но после этого я Я не могу сбросить раскрывающееся значение по умолчанию или первое значение.

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: 

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

1 Ответ

0 голосов
/ 10 апреля 2020

Это очень простой пример того, как сбросить выбор. 

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