Vue将数据恢复到先前状态

Question

我有一个类似这样的JSON对象，

[
  {
    "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": {}
      }
    ]
  }
]

我正在我的vue模板中循环使用这个来创建一个选择菜单，

<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>

通过将select绑定到data_type，每次我进行select更改时，它都会更新数据/json中该对象的数据。我想知道的是，是否可以在更改之前获取旧值？

我试着做了一些事情，

watch: {
    columns: {
      deep: true,
      handler(newValue, oldValue) {
        //do some comparions here
     }
    }
}

但是，新值和旧值似乎是相同的？

Answer 1

正如文件中提到的

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue不保留预变异值的副本。

规避这一挑战的一种可能方法是使用@Shoejep的解决方案

Answer 2

如果您只想查看一个属性是否发生了更改，那么最好在select中使用< code>@input事件。我在下面提供了一个工作片段，展示了如何获取新旧值。

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>