使用保存和取消选项编辑表单

Question

我是 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>

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 方法的开头设置状态消息，然后在您完成服务器调用时更新它。