Modification d'un formulaire avec les options Enregistrer et Annuler

Question

Je suis nouveau sur VueJS. J'essaye de créer un formulaire avec la fonctionnalité simple d'enregistrement et d'annulation. Lors de la liaison du modèle pour former des champs, ils sont mis à jour immédiatement lorsque les entrées sont modifiées, mais je ne veux pas que la liaison étroite. Au lieu de cela, je veux être en mesure d'enregistrer et de soumettre lorsque le bouton "Enregistrer" est pressé et revenir sur les changements lorsque le bouton "Annuler" est pressé.

Quelle est la manière suggérée de Vue de faire cela?

Ce serait également idéal si nous pouvions montrer l'état de sauvegarde du serveur et l'indiquer sur le formulaire si la soumission échouait. Si vous connaissez des exemples ou des échantillons qui seraient extrêmement utiles. Merci!

Voir 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

Il y a quelques façons de gérer cela. Vous pouvez créer un composant séparé pour le formulaire, lui passer des accessoires, puis gérer les modifications d'édition/enregistrement mais d'émission ou, si vous souhaitez le conserver dans un seul composant, vous pouvez utiliser la liaison value et refs, par ex.

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>

Ou vous pouvez utiliser un mécanisme de cache variable (avec les modifications proposées) par exemple

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>

Avec l'une de ces options que vous pouvez définir un message d'état au début de la méthode save puis mettre à jour chaque fois que vous avez terminé avec l'appel du serveur.