Как сбросить v-модель после скрытия ввода с условным рендерингом - PullRequest
Новая
       47

Как сбросить v-модель после скрытия ввода с условным рендерингом

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

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

В случае, когда пользователь устанавливает переключатель в значение true, а затем вводит что-то в текстовое поле, значение модели v для этого ввода необходимо сбросить / удалить, когда пользователь снова устанавливает переключатель в значение false.

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

<v-row>
    <v-col cols="12" sm="12">
        <v-switch
            v-model="data.budget_confirmed"
            label="Budget Confirmed"
            color="primary"
            class="ma-0 pt-0"
            hide-details
        />
    </v-col>

    <v-col v-if="data.budget_confirmed === true" cols="12" sm="12">
        <validation-provider v-slot="{ errors }" name="Amount" rules="required">
            <v-text-field
                v-model="data.amount"
                name="amount"
                label="Amount"
                :error-messages="errors"
                :hide-details="!errors.length"
                outlined
                dense
            />
        </validation-provider>
    </v-col
</v-row>

1 Ответ

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

Прослушивание события change на коммутаторе: 

 <v-switch
     v-model="data.budget_confirmed"
     label="Budget Confirmed"
     color="primary"
     class="ma-0 pt-0"
     hide-details
     @change="onSwitchToggle"
 />

Затем в методе onSwitchToggle сбросьте amount, если переключатель выключен: 

onSwitchToggle () {
   if (!this.budget_confirmed) {
       this.amount = 0;
   }
}
...