vue.js的双向绑定，一个data字段在input文本框中修改后，可以恢复原值吗？

Question

比如官网的这个例子，我如果后面加两个按钮，确定按钮则保存到数据库，取消按钮则把值恢复为原先初始值。
这么有什么好的办法呢？

我现在的做法是，定义两个字段（name,editname），一个用于显示，一个用于编辑，点击保存成功后把editname赋值给name以使页面自动更新值，但我觉得这样很不Vue，并且如果有很多个字段的情况下，这样显然很不方便的。

请有遇到过这问题的朋友指点一下。谢谢。

补充：
我上面可能描述的比较简单，真实场景是这样的，有个个人信息编辑页，性别、昵称、介绍什么的都可以单独编辑修改的，当点击修改按钮时，就会出现个文本框以及两个按钮，这个文本框当然要带原来的值的。然后现在就是发现，随便输入一下，不想改了点击取消，页面上因为双向绑定的原因，已经自动改变了。

我觉得如果每个项都定义两个字段来做，很不好。但刚刚接触VUE，不知道有没有内置的什么方式，比如在能把字段恢复一下什么的

Answer 1

你的默认值不是应该放在 placeholder 里吗？你的意思除了 placeholder 还要强行加默认文字进去，一个不建议你这么做，非要这么写的话，你只能设置两个 data，就算计算属性你也得逐个设置替换的常量。

Answer 2

data 里维护一个数组，比如 words , 点击确定按钮 将当前值 push 进数组， 取消按钮则 pop 出栈。

<input v-model='message' placeholder='edit me'>
<p> Message is {{message}}</p>
<button @click='wordIn'>word in</button>
<button @click='wordOut'>word out</button>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '',
            words: []
        },
        methods: {
            wordIn() {
                this.words.push(this.message)
            },
            wordOut() {
                this.message = this.words.pop()
            }
        }
    }) 
</script>

未测试过，只是思路。