[Vuejs]-Vue reverting data to prior state

by

0👍

✅

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>

0👍

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

Leave a comment