Vue.js 使用“保存”和“取消”选项编辑表单

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

建议的Vue方法是什么

如果我们能够显示服务器的保存状态，并在提交失败时在表单上指出它，这也将是理想的。如果你知道任何例子或样品，这将是非常有帮助的。谢谢

看中

名字：
姓氏：
{{isEditing？'Save'：'Edit'}
取消
var app=新的Vue({
el:“#应用程序”，
数据：{
i编辑：错，
用户：{
名字：“约翰”，
姓：“史密斯”
}
}
})
.视图{
边框颜色：透明；
背景色：首字母；
颜色：首字母
}

有几种方法可以解决这个问题。您可以为表单创建一个单独的组件，向其传递道具，然后通过发出更改来处理编辑/保存，或者如果您想将其保存在单个组件中，您可以使用

value

绑定和

refs

，例如

var-app=新的Vue({
el:“#应用程序”，
数据：{
i编辑：错，
用户：{
名字：“约翰”，
姓：“史密斯”
}
},
方法：{
保存（）{
this.user.firstName=this.$refs['first_name'].value；
this.user.lastName=this.$refs['last_name'].value；
this.isEditing=！this.isEditing；
}
}
})

.view{
边框颜色：透明；
背景色：首字母；
颜色：首字母
}

名字：
姓氏：
编辑
拯救
取消

通常，在表单之外制作一个组件，并在需要时发出更改。我认为这不是那个问题的重复。这个问题特别是关于父组件的道具，其中涉及单个组件和

v-model

的使用。太好了！有了一点进步，我想我现在有了一个好的开始。如果你愿意的话，可以随意把它添加到你的答案中。@orad是的，看起来确实更好，只是想让大家明白这一点。不过我把它添加到了解决方案中！如果数据源是道具怎么办？我收到一个错误，指示我应该“避免直接改变道具，因为每当父组件重新呈现时，该值将被覆盖”，并建议改为使用计算属性，但如果我使用计算属性，则与自定义getter/setter绑定的代码会变得更复杂/@乔纳森。是的，计算属性不能很好地用于此操作，因为它是一个接一个的，不允许您一次保存或取消所有操作。我写的结帐单。它本质上是将道具用作“缓存变量”，并在点击

save

方法时向父对象发送一个对象，或者在点击

cancel

时重置道具的本地变量。

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