请参考我下面的代码片段。我如何获得更改后模型的旧值,在本例中是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);
}
}
});
个字符
我试图使用手表,但我无法找到任何帮助,在观看年龄的一系列项目。
8条答案
按热度按时间lx0bsm1f1#
删除
v-model
,替换为手动处理。值得注意的是,“虽然有点神奇,但v-model本质上是用于更新用户输入事件数据的语法糖(.)",所以你可以删除它并直接处理事件,而不会有太大的伤害,就像你几乎已经做的那样。
首先,将
v-model
替换为:value
。输入仍将遵循item.age
更新,但不会自动更新年龄。字符串
然后,为了实际更新值,将
item.age = event.target.value
添加到changeAge
,如下所示:型
如果你想防止这种变化,你可以忽略赋值,但是,你需要重置输入值。
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 。xuo3flqw2#
你不会像here解释的那样在元素改变时得到旧的值。同样,当观察一个对象时,你不能像here解释的那样得到旧的值,直到对象的引用改变。
为了解决这些问题,你可以创建一个计算属性,它将是你的
items
数据的克隆,你可以在这个计算属性上放置一个监视器来了解旧的值,请参阅下面的工作代码:个字符
0h4hbjxa3#
这可能太晚了。只要watch对象中的函数名被命名为被监视的变量,这对我来说就有效。它只监视特定的变量。
字符串
8zzbczxx4#
replacev-modelwithvalueprop v-model是双向绑定的,它会让你的状态变得复杂,然后在change事件中手动修改age属性
字符串
cnwbcb6i5#
https://v2.vuejs.org/v2/api/#Vue-nextTick
字符串
wswtfjt76#
你可以简单地使用
字符串
和
型
in vue方法对象
b91juud37#
我遇到了同样的问题。我通过将输入 Package 在Vue组件中并在 Package 器组件中查看属性来解决这个问题。在watcher中,我调用$emit,将新值,旧值和项作为参数传递。
字符串
sqougxex8#
Vue 3.3更新,你的onChange处理程序可以接受第一个参数,这将是新的值。
个字符