vue修改时，撤销修改数据如何回滚？

vue里做了双向绑定，加入要修改数据，如果提交则没问题，但如果没提交到数据库就取消或放弃了修改，dom层面的数据如何回到未修改前呢？

vue.js

阅读 10k

4 个回答

得票最新

对角另一面

1.4k72438

发布于
2016-09-26

我的做法是加个私有属性来保存原始数据，需要的时候恢复

yeungx

8763723

发布于
2016-09-26

可以将input绑定两个属性，保存或取消变更


<body id='app'>

<input type="text" :value="oldVal" v-model="newVal">
<button @click="save"> 保存 </button>
<button @click="cancel"> 取消 </button>
<p>oldVal:  {{ oldVal }} </p>
<p>newVal:  {{ newVal }} </p>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            newVal: '',
            oldVal: '123123',
        },
        methods: {
            save(){
                this.$set("oldVal",this.newVal);
            },
            cancel(){
                this.$set("newVal",this.oldVal);
            }
        }
    })
</script>