如何找出已经改变的输入的值

Question

我有 3 个输入，每个输入都有一个特定的值。

<input type="text" id="inputType" v-model="add_sale.type">
<input type="text" id="inputId" v-model="add_sale.id">
<input type="text" dir="auto" v-model="add_sale.name" id="inputName" class="form-control" placeholder="Material" readonly style="background: #fff;">

我像这样更改任何输入值：

new Vue({
  data() {
    return{
      material:{
        name: "niaz",
        id: 1,
        type: "human"
      },
      add_sale: {}
    }
  },
  mounted() {
    document.getElementById("inputName").value = this.material.name;
    document.getElementById("inputId").value = this.material.id;
    document.getElementById("inputType").value = this.material.type;
  }
})

现在我需要查看之前更改的值。 我想知道是否有任何方法可以找出之前更改的输入之一的值是什么，如果类型是人类，则将名称输入更改为 Alex。

Answer 1

老兄，

如果我理解正确的话。 你正在寻找一些东西来跟踪你以前的价值。 使用Vuejs，您可以非常轻松地做到这一点。还有一件更重要的事情。当你使用vue时，你不需要依赖vanilla Javascript

所以你要找的是这样的东西，

new Vue({
  data() {
    return{
      type : null,
      id: null, 
      name: null, 
      add_sale: {}
    }
  },
  watch: {
    type(oldvalue, newvalue) {
        //do whatever you want to do
    },
    id(oldvalue, newvalue) {
        //do whatever you want to do
    },
    name(oldvalue, newvalue) {
        //do whatever you want to do
    },
  },
  mounted() {
     this.type = 'something' //initial the value
     this.id = 1243 //intial value
     this.name = 'name' //initial value
  }
})

<input type="text" id="inputType" v-model="type">
<input type="text" id="inputId" v-model="id">
<input type="text" dir="auto" v-model="name" id="inputName" class="form-control" placeholder="Material" readonly style="background: #fff;">

因此您可以使用 vuejs watch 轻松完成此操作，这与更改事件侦听器的工作方式非常相似。

还有参数oldvalue 是你之前的数据，newvalue 是你改变的当前数据