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

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是你改变的当前数据

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

How to find out the value of an input which already changed

javascript

watch

vue.js