Vuejs - アイテムごとのアイテムの操作と検証

Question

アプリケーションはjsonリストのアイテムを受け取ります。

• id
• name
• code

• max_cost

  data: { itemList: [ 
  {id: 0, name: 'Apple', code: '007', max_cost: 50}, 
  {id: 1, name: 'Pear', code: '008', max_cost: 25}, 
  {id: 2, name: 'Chees', code: '006', max_cost: 75} 
  ], 
  } 
  

：

このリストには、4つの要素を含んでいます

リストを表示するのは簡単です。ディスプレイの一環として、各商品の費用を入力する必要があります。

<ul v-for="item in itemList"> 
    <li > 
    {{ item.name }} 
    <input type="text" v-model="item.cost" value="25" v-on="change: verifyCost(item)"> 
    </li> 
</ul> 

アプリは、入力された費用が商品の上限費用以下であることを確認する必要があります。アイテムの上限コストを超えている場合、アプリは上限コストにコストを設定する必要があります。

methods: { 
verifyCost: function(item){ 
    if(item.cost >= item.max_cost){ 
    alert('Max cost exceeded'); 
    item.cost = item.max_cost; 
    }  
}, 

}、jsfiddleを参照してください

てください：https://jsfiddle.net/daanjacobs/0ym20pye/6/

は、どのような援助をありがとう、私はそれが私が行方不明ですという小さなものです確信しています。

Answer 1

v-on構文が正しくありませんでした。

間違っている：右

v-on="change: ..." 

：

v-on:change="..." 

https://jsfiddle.net/Linusborg/0ym20pye/9/