I have a JSON object that looks like this,
[
{
"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": {}
}
]
}
]
I am looping over this in my vue template to create a select menu,
<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>
By binding the select to the data_type every time I make a select change it updates the data for that object in my data/json. What I want to know is it possible to get the old value before it was changed?
I have tried to do something like,
watch: {
columns: {
deep: true,
handler(newValue, oldValue) {
//do some comparions here
}
}
}
But it appears that newValue and oldValue are the same?
As mentioned in the docs
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.
One possible way of circumventing this challenge is to use @Shoejep's solution
You would be better off using an @input event on your select, if you only want to see if one property has changed. I've included a working snippet below showing how you can get the old and new value.
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>