web-dev-qa-db-ja.com

変更イベント時に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>

時計を使おうとしていますが、さまざまなアイテムの年齢を見るのに役立ちません。

javascriptjqueryvuejs2vue.js
14
madi

このソリューションでは、一般的なモデルの変更ではなく、ユーザー入力からの変更を処理する場合にのみ古い値が必要であると想定しています-おそらくそうです。以下に、必要に応じてすべての変更を監視するソリューションのスケッチを追加しましたが、おそらく、このコンポーネントではなく、発生した場所で他の変更を制御する方が良いでしょう。

_v-model_をドロップし、手動処理に置き換えます。

"少し魔法的ですが、v-modelは本質的にユーザー入力イベントのデータを更新するための構文シュガー（...）" に注意することが重要です。そのため、すでにほとんどそうであるように、大きな害を与えることなく、削除してイベントを直接処理できます。

まず、_v-model_を_:value_に置き換えます。入力は引き続き_item.age_更新に従いますが、年齢は自動的に更新されません。

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

次に、実際に値を更新するには、次のようにchangeAgeに_item.age = event.target.value_を追加します。

_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_を置きます。コンポーネント内で_<input>_を作成し、value propをそのコンポーネントに転送するとともに、input/changeイベントを外部に転送します。コンポーネントでは、単一のアイテムが単一の小道具なので、ウォッチャーを直接アイテムに添付できます。関連するドキュメント： Component Basics 、 Customizing Component _v-model_ 、 Props 。

12
Frax

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))
    }
  }
});
<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>
10
Saurabh

遅すぎるかもしれません。監視オブジェクト内の関数名が監視対象の変数として指定されている限り、これは私にとってはうまくいきました。特定の変数のみを監視します。

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);
   }
}
4
G...... T......

v-modelをvalueに置き換えるprop v-modelは双方向バインディングであり、状態を複雑にしてから、変更イベントで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
   }
}
3
lynnic

単純に使用できます

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

そして

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

in vueメソッドオブジェクト

1
Rahul Reghunath