保存とキャンセルのオプションを使用したフォームの編集

Question

VueJSの新機能です。私は単純な保存とキャンセルの機能を持つフォームを作成しようとしています。フィールドを作成するためにモデルをバインドするとき、入力が変更されると直ちに更新されますが、私はそのぎっしりとした束縛を望んでいません。代わりに、 "保存"ボタンを押したときに保存して送信し、 "キャンセル"ボタンを押したときに変更を元に戻したいと思っています。

これを行う方法として、どのような方法がありますか？

送信が失敗した場合は、サーバーの保存状況を表示してフォームに表示することもできれば理想的です。非常に役立つサンプルやサンプルが分かっている場合。ありがとう！これを処理するいくつかの方法があります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

に

を参照してください。フォームの別のコンポーネントを作成し、それに小道具を渡してから編集/保存を処理しながら変更を行うことができます。または、単一のコンポーネントに保持する場合は、valueバインディングとrefsを使用できます。

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>

それとも、例えば（提案編集で）変数のキャッシュ・メカニズムを使用することができますこれらのオプションのいずれかと

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>

あなたはsave方法の開始時にステータスメッセージを設定し、あなたがサーバーの呼び出しで行われている時はいつでもそれを更新することができます。