如何在取消选中vue js中的复选框的同时清除文本字段

Question

当我取消选中复选框时，我想清除文本字段。

当我选中复选框时，它显示两个文本字段，一个是部分金额，另一个是描述。

取消选中复选框后，两个文本字段中也会显示数据。

我的要求是在取消选中复选框后，两个文本字段都不应该显示值。

这是我的代码：

isMakingPartialPayment：虚假

<v-flex xs12 md6 v-if="(user.type == 'admin'  || user.type == 'customer' || isAuthUserHasInvoiceAccess) && hasPartialPaymentFeature">
<h4>Payment Adjustment</h4>
{{isMakingPartialPayment}}
<v-flex :class="invoiceInfo.partialAmount ? 'payment-adjustment-style' : ''">
<v-checkbox data-testid="invoice-payment-adjustment-checkbox" v-model="isMakingPartialPayment" :label="`I want to pay a portion of this invoice`"></v-checkbox>
<v-flex v-if="isMakingPartialPayment">
<h4>Amount approved to pay:</h4>
<money-text-field :fieldType="'partialAmount'" :invoicedAmount="invoiceInfo.amount" data-testid="invoice-partial-amount" v-model="invoiceInfo.partialAmount" ></money-text-field>
</v-flex>
<v-flex v-if="isMakingPartialPayment">
<h4>Reason for not paying full amount:</h4>
<v-text-field data-testid="invoice-payment-adjustment-reason" :rules="partialAmountReasonRules" type="text" light v-model="invoiceInfo.reasonForPartialAmount" solo label="reason (required)"> </v-text-field>
</v-flex>
</v-flex>
</v-flex>

Answer 1

对模型值使用观察程序。

使用vue3语法

const invoiceInfo = reactive(
{
reasonForPartialAmount:'', 
partialAmount: '', 
isMakingPartialPayment: false,
})
watch(() => invoiceInfo.isMakingPartialPayment, value => {
if (!value) {
invoiceInfo.reasonForPartialAmount = ''
invoiceInfo.partialAmount = '' 
}
})