如何隐藏带条件渲染的输入后如何重设v模型

Question

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

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

我知道我可以手动或通过使用观察程序来实现。但是，只是想知道我是否错过了文档中的某些东西，这可能对我有用，或者比我认为的唯一方法更好。

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