Tengo un objeto JSON que se parece a esto,
[ { "column": { "name": "31_12_2021", "display_name": "31/12/2021", "default_value": "", "pk": true, "hidden": false, "data_type": "1" }, "header_row": { "style": {} }, "data_rows": [ { "style": {} }, { "style": {} } ] }, { "column": { "name": "quick", "display_name": "quick", "default_value": "", "pk": false, "hidden": false, "data_type": "1" }, "header_row": { "style": {} }, "data_rows": [ { "style": {} }, { "style": {} } ] }, { "column": { "name": "333", "display_name": "333", "default_value": "", "pk": false, "hidden": false, "data_type": "1" }, "header_row": { "style": {} }, "data_rows": [ { "style": {} }, { "style": {} } ] } ]Estoy recorriendo esto en mi plantilla vue para crear un menú de selección,
<div v-for="(c, i) in columns" :key="i"> <select v-model="c.column.data_type"> <option value="1">Data Type 1</option> <option value="2">Data Type 2</option> <option value="3">Data Type 3</option> <option value="4">Data Type 4</option> </select> </div>Al vincular la selección al tipo de datos cada vez que hago un cambio de selección, actualiza los datos para ese objeto en mi data/json. Lo que quiero saber es si es posible obtener el valor anterior antes de que se cambiara.
He intentado hacer algo como,
watch: { columns: { deep: true, handler(newValue, oldValue) { //do some comparions here } } }¿Pero parece que newValue y oldValue son lo mismo?
Como se menciona en los documentos
Nota: al mutar (en lugar de reemplazar) un Objeto o una Matriz, el valor anterior será el mismo que el valor nuevo porque hacen referencia al mismo Objeto/Matriz. Vue no guarda una copia del valor previo a la mutación.
Una forma posible de eludir este desafío es usar la solución de @Shoejep
Sería mejor usar un evento @input en su selección, si solo desea ver si una propiedad ha cambiado. He incluido un fragmento de trabajo a continuación que muestra cómo puede obtener el valor antiguo y el nuevo.
Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: "#app", data: () => { return { columns: [{ "column": { "name": "31_12_2021", "display_name": "31/12/2021", "default_value": "", "pk": true, "hidden": false, "data_type": "1" }, "header_row": { "style": {} }, "data_rows": [{ "style": {} }, { "style": {} }] }, { "column": { "name": "quick", "display_name": "quick", "default_value": "", "pk": false, "hidden": false, "data_type": "1" }, "header_row": { "style": {} }, "data_rows": [{ "style": {} }, { "style": {} }] }, { "column": { "name": "333", "display_name": "333", "default_value": "", "pk": false, "hidden": false, "data_type": "1" }, "header_row": { "style": {} }, "data_rows": [{ "style": { } }, { "style": { } }] }] } }, methods: { onDataTypeChange: function(oldValue, newValue) { alert("Changed from " + oldValue + " to " + newValue); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(c, i) in columns" :key="i"> <select v-model="c.column.data_type" @input="onDataTypeChange(c.column.data_type, $event.target.value)"> <option value="1">Data Type 1</option> <option value="2">Data Type 2</option> <option value="3">Data Type 3</option> <option value="4">Data Type 4</option> </select> </div> </div>