저장 및 취소 옵션을 사용하여 양식 편집

저장 및 취소 옵션을 사용하여 양식 편집

저는 VueJs에 처음 왔어요.간단한 저장 및 취소 기능이 있는 폼을 작성하려고 합니다.모델을 필드를 형성하기 위해 바인드할 때 입력이 변경되면 즉시 업데이트가 되지만, 그렇게 엄격한 바인딩을 원하지 않습니다.대신 저장 버튼을 누르면 저장 및 전송하고 취소 버튼을 누르면 변경 내용을 되돌릴 수 있습니다.

Vue가 제안하는 방법은 무엇입니까?

또, 송신에 실패했을 경우는, 서버의 보존 상태를 표시해, 폼에 표시하는 것이 이상적입니다.당신이 알고 있는 예나 샘플이 있다면 큰 도움이 될 것입니다.감사합니다!

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>

몇 가지 방법이 있습니다.양식에 대한 개별 구성요소를 작성하고, 소품을 전달한 다음 변경 내용을 내보내 편집/저장 작업을 처리할 수 있습니다. 또는 단일 구성요소에 보관하려는 경우 사용할 수 있습니다.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서버 호출이 완료될 때마다 업데이트하십시오.

언급URL : https://stackoverflow.com/questions/46166359/editing-a-form-with-save-and-cancel-options