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

Posted 2023-02-23

【中文标题】使用保存和取消选项编辑表单

【英文标题】：Editing a form with save and cancel options

【发布时间】：2018-02-20 07:47:19

【问题描述】：

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

【问题讨论】：

一般来说，从表单中创建一个组件，当你想要的时候发出变化。 Here is an example.

VueJS right way to edit prop without changing parent data的可能重复

我不认为这是该问题的重复。该问题专门针对来自父组件的道具，其中涉及单个组件以及v-model的使用。

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

【讨论】：

太棒了！稍微改进一下，我想我现在有一个很好的solution。如果需要，请随时将其添加到您的答案中。

@orad 是的，看起来确实更好，只是想表达清楚。不过我将它添加到解决方案中！

如果数据的来源是一个道具呢？我收到一个错误，指示我应该“避免直接改变一个道具，因为每当父组件重新渲染时，该值将被覆盖”并建议使用计算属性，但如果我使用计算属性，代码只会变得更加复杂与自定义 getter/setter 绑定。 ://

@JonathanB。是的，计算属性不能很好地解决这个问题，因为它是一个一个的，并且不允许您一次保存或取消所有。结帐this example 我写了。它本质上是将道具用作“缓存变量”并在save 方法被命中时将对象发送给父级，或者如果cancel 被命中则将本地变量重置为道具。