Question

我有一个使用v-model指令控制数据的输入。我需要看一下这些数据并弄清楚是否已更改。

当我watch数据时，新值和旧值相同。这是因为数据是突变的，如docs中所示：https://vuejs.org/v2/api/#vm-watch

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

如何使用v-model并且不对数据进行突变？

Answer 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);

如何在不更改VueJS中的值的情况下使用v模型？

1 个答案: