vue.js - vuejs - Editar un formulario con las opciones guardar y cancelar

vue form wizard vuelidate

Question

Soy nuevo en VueJS. Intento crear un formulario con la simple funcionalidad Guardar y Cancelar. Al vincular el modelo a los campos de formulario, se actualizan de inmediato a medida que se modifican las entradas, pero no quiero ese enlace estricto. En cambio, quiero poder guardar y enviar cuando se presiona el botón "Guardar" y revertir los cambios cuando se presiona el botón "Cancelar".

¿Cuál es la forma sugerida de Vue de hacer esto?

También sería ideal si podemos mostrar el estado de ahorro del servidor e indicarlo en el formulario si el envío falla. Si conoce algún ejemplo o muestras que sean de gran ayuda. ¡Gracias!

Ver en JSFiddle

<template>
  <div id="app">
    <div>
      First Name:
      <input type="text" v-model="user.firstName" :disabled="!isEditing"
             :class="{view: !isEditing}">
    </div><div>
      Last Name:
      <input type="text" v-model="user.lastName" :disabled="!isEditing"
             :class="{view: !isEditing}">  
    </div>
    <button @click="isEditing = !isEditing">
      {{ isEditing ? ''Save'' : ''Edit'' }}
    </button>
    <button v-if="isEditing" @click="isEditing = false">Cancel</button>
  </div>
</template>

<script>
  var app = new Vue({
    el: ''#app'',
    data: {
      isEditing: false,
      user: {
        firstName: ''John'',
        lastName: ''Smith''
      }
    }
  })
</script>

<style>
  .view {
    border-color: transparent;
    background-color: initial;
    color: initial
  }
</style>

Answer 1

Hay algunas maneras de manejar esto. Puede crear un componente separado para el formulario, pasar accesorios a él, y luego manejar la edición / guardar allí o si desea mantenerlo en un solo componente, puede usar el enlace de value y refs , por ejemplo

var app = new Vue({
  el: ''#app'',
  data: {
    isEditing: false,
    user: {
      firstName: ''John'',
      lastName: ''Smith''
    }
  },
  methods: {
    save() {
      this.user.firstName = this.$refs[''first_name''].value;
      this.user.lastName = this.$refs[''last_name''].value;
      this.isEditing = !this.isEditing;
    }
  }
})

.view {
  border-color: transparent;
  background-color: initial;
  color: initial
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <div>
    First Name:
    <input type="text" ref="first_name" :value="user.firstName" :disabled="!isEditing"
           :class="{view: !isEditing}">
  </div><div>
    Last Name:
    <input type="text" ref="last_name" :value="user.lastName" :disabled="!isEditing"
           :class="{view: !isEditing}">  
  </div>
  <button @click="isEditing = !isEditing" v-if="!isEditing">
    Edit
  </button>
  <button @click="save" v-else-if="isEditing">
  Save
  </button>
  
  <button v-if="isEditing" @click="isEditing = false">Cancel</button>
</div>

O puede usar un mecanismo de memoria caché variable (con ediciones sugeridas), por ej.

var app = new Vue({
  el: ''#app'',
  data: {
    isEditing: false,
    user: {
      firstName: ''John'',
      lastName: ''Smith'',
    }
  },
  mounted() {
    this.cachedUser = Object.assign({}, this.user);
  },
  methods: {
    save() {
      this.cachedUser = Object.assign({}, this.user);
      this.isEditing = false;
    },
    cancel() {
      this.user = Object.assign({}, this.cachedUser);
      this.isEditing = false;
    }
  }
})

.view {
  border-color: transparent;
  background-color: initial;
  color: initial
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div>
    First Name:
    <input type="text" v-model="user.firstName" :disabled="!isEditing"
           :class="{view: !isEditing}">
  </div><div>
    Last Name:
    <input type="text" v-model="user.lastName" :disabled="!isEditing"
           :class="{view: !isEditing}">  
  </div>
  <button @click="isEditing = !isEditing" v-if="!isEditing">Edit</button>
  <button @click="save" v-else-if="isEditing">Save</button>
  <button v-if="isEditing" @click="cancel">Cancel</button>
</div>

Con cualquiera de estas opciones, puede establecer un mensaje de estado al comienzo del método de save y luego actualizarlo cuando haya terminado con la llamada al servidor.