jquery Vuejs在更改事件时获取旧值

mcvgt66p  于 2023-11-17  发布在  jQuery
关注(0)|答案(8)|浏览(221)

请参考我下面的代码片段。我如何获得更改后模型的旧值,在本例中是vuejs中的age?

var app = new Vue({
  el:"#table1",
  data:{
   items:[{name:'long name One',age:21},{name:'long name Two',age:22}]
  },
  methods:{
    changeAge:function(item,event){
      alert(item.age);
    }
  }
});

个字符
我试图使用手表,但我无法找到任何帮助,在观看年龄的一系列项目。

lx0bsm1f

lx0bsm1f1#

  • 此解决方案假定您仅在处理来自用户输入的更改时才需要旧值-这可能是事实,而不是一般的模型更改。下面我添加了一个解决方案的草图,如果有必要,可以查看所有更改,尽管可能最好在它们发生的地方控制其他更改,而不是在此组件中。*

删除v-model,替换为手动处理。

值得注意的是,“虽然有点神奇,但v-model本质上是用于更新用户输入事件数据的语法糖(.)",所以你可以删除它并直接处理事件,而不会有太大的伤害,就像你几乎已经做的那样。
首先,将v-model替换为:value。输入仍将遵循item.age更新,但不会自动更新年龄。

<input type="text" name="qty"
       :value="item.age"
       @change="changeAge(item,$event)">

字符串
然后,为了实际更新值,将item.age = event.target.value添加到changeAge,如下所示:

changeAge: function(item, event){
  alert(item.age);  // Old value
  alert(event.target.value);  // New value
  item.age = event.target.value;  // Actual assignment
}

  • 注意:您可能希望使用@input,这是v-model实际使用的。

如果你想防止这种变化,你可以忽略赋值,但是,你需要重置输入值。Vue.set(item, 'age', item.age)item.age = item.age可能可以做到这一点,但我不太确定它是否会。
注意:event.target.value是一个字符串,如果你需要一个数字,使用parseInt()

为每个项目创建一个单独的组件示例,并在那里创建一个监视

  • 如果您需要查看所有更改。但是,如果您需要,也许您应该在其他地方进行,而不是这个组件。*

我还没有准备好所有的细节,所以我只是大致的草稿:在你的v-for中,代替普通的<input>,你放置了另一个组件,比如<my-item>。你把v-model=item放在上面。在组件内部,你创建了<input>,并把value属性转发给它,以及转发它的input/change事件到外部。在你的组件中,单个项目是一个单独的 prop ,所以你可以直接给它附加一个观察者。相关文档:Component Basics,定制组件v-model, prop 。

xuo3flqw

xuo3flqw2#

你不会像here解释的那样在元素改变时得到旧的值。同样,当观察一个对象时,你不能像here解释的那样得到旧的值,直到对象的引用改变。
为了解决这些问题,你可以创建一个计算属性,它将是你的items数据的克隆,你可以在这个计算属性上放置一个监视器来了解旧的值,请参阅下面的工作代码:

var app = new Vue({
  el:"#table1",
  data:{
   items:[{name:'long name One',age:21},{name:'long name Two',age:22}]
  },
  watch:{
    clonedItems: function(newVal, oldVal){
      alert(JSON.stringify(newVal));
      alert(JSON.stringify(oldVal));
    }
  },
  computed:{
    clonedItems: function(){
       return JSON.parse(JSON.stringify(this.items))
    }
  }
});

个字符

0h4hbjxa

0h4hbjxa3#

这可能太晚了。只要watch对象中的函数名被命名为被监视的变量,这对我来说就有效。它只监视特定的变量。

watch:{
   items: function(newVal, oldVal){
      console.log("New value: "+ newVal + ", Old value: " + oldVal);
   },
   other_variable: function(newVal, oldVal){
      console.log("New value: "+ newVal + ", Old value: " + oldVal);
   }
}

字符串

8zzbczxx

8zzbczxx4#

replacev-modelwithvalueprop v-model是双向绑定的,它会让你的状态变得复杂,然后在change事件中手动修改age属性

<input type="text" name="qty"
                :value="item.age"   
                @change="changeAge">


export default {
  change(val) {
     let ov = this.item.age
     let nv = val
     // do something
     // this.item.age = nv
   }
}

字符串

cnwbcb6i

cnwbcb6i5#

https://v2.vuejs.org/v2/api/#Vue-nextTick

changeAge() {
             this.$nextTick(() => {
                // here the current values are set, do desired actions
                
            })
}

字符串

wswtfjt7

wswtfjt76#

你可以简单地使用

<input type="text" name="qty" v-model="item.age" @change="changeAge($event)">

字符串

changeAge: function(event){
  item = event.target.value;  // Actual assignment
}


in vue方法对象

b91juud3

b91juud37#

我遇到了同样的问题。我通过将输入 Package 在Vue组件中并在 Package 器组件中查看属性来解决这个问题。在watcher中,我调用$emit,将新值,旧值和项作为参数传递。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<table class="table table-cart" id="table1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in items">
            <td>{{item.name}} :</td>       
            <td>
                <item-age-input
                    :item="item"
                    @age-changed="ageChanged"></item-age-input>
            </td>
        </tr>
    </tbody>
</table>

<script>
Vue.component('item-age-input', {
    props: {
        item: {
            type: Object,
            required: true
        }
    },
    template: `<input type="text" name="qty" v-model="item.age">`,
    watch: {
        "item.age": function(newAge, oldAge) {
            this.$emit('age-changed', newAge, oldAge, this.item);
        }
    }
});

var app = new Vue({
    el:"#table1",
    data:{
        items:[{name:'long name One',age:21},{name:'long name Two',age:22}]
    },
    methods: {
        ageChanged: function(newAge, oldAge, item){
            alert(newAge + ', ' + oldAge);
            console.log(item);
        }
    }
});
</script>

字符串

sqougxex

sqougxex8#

Vue 3.3更新,你的onChange处理程序可以接受第一个参数,这将是新的值。

<my-component
  v-model="firstName"
  @update:model-value="onFirstNameChanged"
/>

个字符

相关问题