Vuejs 在更改事件时获取旧值

新手上路,请多包涵

请参考我下面的片段。如何获得更改后模型的旧值,在这种情况下是 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 许可协议

阅读 2k
2 个回答

此解决方案假定您仅在处理来自用户输入的更改时才需要旧值 - 这可能是这种情况,而不是通用模型更改。下面我添加了一个解决方案草图,在必要时观察所有变化,尽管最好在它们发生的地方控制其他变化,而不是在这个组件中。

删除 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 实际使用的。

就是这样,它应该可以解决问题。如果您需要阻止更改,您可以省略分配,但是,您需要重置输入值。 item.age = item.age of Vue.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 the value prop to it, as well as forward it’s input / change events outside .在您的组件中,单个项目是单个道具,因此您可以直接将观察者附加到它。相关文档: 组件基础知识自定义组件 v-model道具

原文由 Frax 发布,翻译遵循 CC BY-SA 4.0 许可协议

您不会得到元素 on-change 的旧值,如此 所述。此外,在观察对象时,在对象的引用发生变化之前,您无法获得 此处 所述的较旧值。

要解决这些问题,您可以创建一个计算属性,该属性将克隆您的 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))
    }
  }
});
 <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">
       </td>
     </tr>
   </tbody>
 </table>

原文由 Saurabh 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题