如何在使用条件渲染隐藏输入后重置 v-model

Question

我有两个输入，第一个是开关，第二个是文本字段，如果 switch 设置为 true，则会有条件地显示。

在用户将开关设置为 true 然后在文本框中输入内容的情况下，当用户再次将开关设置为 false 时，需要重置/删除此输入的 v 模型值。

我知道我可以手动或使用 watcher 来实现。但是，我只是好奇我是否错过了文档中的某些内容，这些内容将为我做这件事，或者可能是比我认为唯一的方法更好的方法。

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

Answer 1

监听开关上的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;
   }
}