请参考我下面的片段。如何获得更改后模型的旧值,在这种情况下是 vuejs 中的年龄?
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);
}
}
});
<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>
<input type="text" name="qty"
v-model="item.age"
@change="changeAge(item,$event)">
</td>
</tr>
</tbody>
</table>
我正在尝试使用手表,但在查看一系列物品的年龄时找不到任何帮助。
原文由 madi 发布,翻译遵循 CC BY-SA 4.0 许可协议
此解决方案假定您仅在处理来自用户输入的更改时才需要旧值 - 这可能是这种情况,而不是通用模型更改。下面我添加了一个解决方案草图,在必要时观察所有变化,尽管最好在它们发生的地方控制其他变化,而不是在这个组件中。
删除
v-model
并将其替换为手动处理。重要的是要注意 “虽然有点神奇,但 v-model 本质上是用于更新用户输入事件数据的语法糖 (…)” 。因此,您可以删除它并直接处理事件而不会造成太大伤害,就像您几乎已经做的那样。
首先,将
v-model
替换为:value
。输入仍会跟随item.age
更新,但不会自动更新年龄。然后,为了实际更新值,将
item.age = event.target.value
添加到changeAge
,如下所示:注意:您可能想改用 @input,这就是 v-model 实际使用的。
就是这样,它应该可以解决问题。如果您需要阻止更改,您可以省略分配,但是,您需要重置输入值。
item.age = item.age
ofVue.set(item, 'age', item.age)
可以解决问题,但我不太确定它会不会。注意:
event.target.value
是一个字符串,如果你需要一个数字,使用parseInt()
。为每个项目创建一个单独的组件实例并在那里创建一个手表
如果您需要查看所有更改。但是,如果您需要它,也许您应该在其他地方而不是这个组件中执行此操作。
我没有准备好所有的细节,所以我只是草稿:在你的
v-for
中,而不是简单的<input>
,你放置另一个组件,比如<my-item>
.你把v-model=item
放在上面。 Inside the component, you create the<input>
and forward thevalue
prop to it, as well as forward it’sinput
/change
events outside .在您的组件中,单个项目是单个道具,因此您可以直接将观察者附加到它。相关文档: 组件基础知识、 自定义组件v-model
、 道具。