2

I have two inputs from which the first one is a switch and the second one is a text field which gets conditionally displayed if switch is set to true.

In situation when user sets the switch to true and then enters something in the text box the v model value for this input needs to be reset / removed when user sets the switch to false again.

I know I can achieve this manually or by using watcher. However just curious if I have missed something in the docs which will do this for me or may be a better method than what I think is the only way. 

<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>
user4676307
  • 409
  • 8
  • 22

1 Answers1

1

Listen for the change event on the switch:

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

Then in the onSwitchToggle method, reset amount when the switch if off:

onSwitchToggle () {
   if (!this.budget_confirmed) {
       this.amount = 0;
   }
}
Brian Lee
  • 17,904
  • 3
  • 41
  • 52
  • Thank you! This is exactly what I had in mind but was just curious if there was anything that will handle multiple inputs like this in complex forms. – user4676307 Apr 16 '20 at 06:42