使用保存和取消选项编辑表单 [英] Editing a form with save and cancel options

问题描述

我是VueJS的新手.我正在尝试使用简单的保存和取消功能创建一个表单.当将模型绑定到表单字段时，它们会随着输入的更改而立即更新，但是我不希望这种紧密绑定.相反，我希望能够在按下保存"按钮时保存并提交，并在按下取消"按钮时还原更改.

I'm new to VueJS. I'm trying to create a form with simple Save and Cancel functionality. When binding the model to form fields they get updated immediately as the inputs are changed, but I don't want that tight binding. Instead, I want to be able to save and submit when the "Save" button is pressed and revert the changes when the "Cancel" button is pressed.

建议的Vue方法是什么?

What's the suggested Vue way of doing this?

如果提交失败，我们可以显示服务器保存状态并在表单上指出它，这也是理想的选择.如果您知道任何示例或示例，将对您大有帮助.谢谢！

It would also be ideal if we can show the server save status and indicate it on the form if the submission is failed. If you know of any examples or samples that would be hugely helpful. Thanks!

请参见 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，例如

There's a few ways to handle this. You could create a separate component for the form, pass props to it, and then handle the editing/saving by emitting changes or if you want to keep it in a single component you could use value binding and refs, e.g.

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>

或者您可以使用变量缓存机制(具有建议的修改)，例如

Or you could use a variable cache mechanism (with suggested edits) e.g.

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方法的开始处设置状态消息，然后在完成服务器调用后立即对其进行更新.

With any of these options you can set a status message at the start of the save method and then update it whenever you're done with the server call.

这篇关于使用保存和取消选项编辑表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！