如何在不改变 VueJS 中的值的情况下使用 v-model？答案

【问题标题】：How can I use v-model and without mutating the value in VueJS?如何在不改变 VueJS 中的值的情况下使用 v-model？
【发布时间】：2018-10-03 13:12:23
【问题描述】：

我有一个使用v-model 指令来控制数据的输入。我需要查看上述数据并确定它是否已更改。

当我watch数据时，新旧值是一样的。这是因为数据发生了变异，如文档中所示：https://vuejs.org/v2/api/#vm-watch

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。 Vue 不保留预突变值的副本。

如何使用v-model 而不改变数据？

【问题讨论】：

看楼的原因是什么？ v-model 本质上只是 :value="" 和 @input="" 中 @input 的语法糖，您可以指定自定义方法并挂钩更改。

标签： javascript vue.js immutability dplyr

【解决方案1】：

您可以使用单独的数据值来跟踪 $watch 的更改，而不是使用模型绑定变量。这使您可以访问以前的值。

HTML

<div id="app">
    <input v-model="inputModel" type="text" />
</div>

Javascript

var vm = new Vue({
    "el" : "#app",
    "data" : {
            "inputModel" : "",
            "inputValue" : ""
    },
    "methods" : {
        "changeHandler" : function(a,b) {
            console.log("Updating \""+this.inputValue+"\" to \""+a+"\"");
            this.inputValue = a;
        }
    }
});

vm.$watch("inputModel",vm.changeHandler);

【讨论】：

关闭。但您应该使用一个计算值，将inputModel 与inputValue 进行比较。这样您就可以保持原始值。