Как я могу использовать v-модель без изменения значения в VueJS?

Question

У меня есть вход, который использует директиву v-model для управления данными.Мне нужно посмотреть указанные данные и выяснить, изменились ли они.

Когда я watch данные, новые и старые значения совпадают.Это потому, что данные видоизменяются, как видно из документов: 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);