Best way to handle cancel button a form in Vue.js-CodePudding

I have 4 inputs in my panel; when user clicks cancel I need to revert to the original values before they're modified. Is there a Vuetify or Vue.js way to achieve this? or do I have to manage it using JS by storing all values in a tmp variables?

<template>
  <v-expansion-panels focusable v-model="panel">
    <v-expansion-panel v-for="(vehicle, index) in vehicles" :key="index">
      <v-expansion-panel-header>
        <v-row no-gutters>
          <v-col> {{ vehicle.VIN }} </v-col>
          <v-col>
            <v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
          </v-col>
          <v-col align="right">
            <v-btn
              v-if="type == 'saved'"
              text
              color="red"
              @click.stop="remove(index, type)"
            >
              DELETE
            </v-btn>
          </v-col>
        </v-row>
      </v-expansion-panel-header>

      <v-expansion-panel-content >
        <v-form>
          <v-row>
            <v-col cols="12" md="4">
              <v-text-field v-model="vehicle.VIN" label="VIN #" />
            </v-col>

            <v-col cols="12" md="4">
              <v-text-field
                v-model="vehicle.ModelYear"
                label="Year"
                type="number"
              />
            </v-col>

            <v-col cols="12" md="4">
              <v-text-field v-model="vehicle.Make" label="Make" />
            </v-col>

            <v-col cols="12" md="4">
              <v-text-field v-model="vehicle.Model" label="Model" />
            </v-col>
          </v-row>

          <div >
            <v-btn  text @click="cancel(index, type)">
              Cancel
            </v-btn>
            <v-btn
              v-if="type == 'searched'"
              color="blue lighten-1"
              outlined
              @click="save(index, type)"
              >Save</v-btn
            >

            <v-btn
              v-if="type == 'saved'"
              color="green lighten-1"
              outlined
              @click="update(index, type)"
              >Update</v-btn
            >
          </div>
        </v-form>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

CodePudding user response：

i think it's preferred if you have another variable, for example tempVehicle to handle the form. you update the variable tempVehicle when opening the form and clear the variable tempVehicle when closing the form

the data section would look like this

// assuming you're using vue 2 because of vuetify
data: () => ({
  tempVehicle: {
    Model: '',
    ModelYear: '',
    VIN: '',
    Make: '',
  }
})

and this would be your methods to set item and cancel function

methods: {
  // your method to set the form values
  setFormValue(vehicle) {
    this.tempVehicle = vehicle
  },
  // method to cancel the operation
  cancel() {
    this.tempVehicle = {
      Model: '',
      ModelYear: '',
      VIN: '',
      Make: '',
    }
  },
},

and finally when the user click the update, you can set the target item from your list with the updated variable tempVehicle

CodePudding user response：

You could use copy of initial object and set that copy by click reset button. That copy object could be created in created/mounted hook.

Example here - codesandbox.io/s/eloquent-mclean-7hrvsr?file=/src/App.vue