Vuejs - Öğe başına öğe öğesi denetimi ve doğrulama

Question

Uygulama, öğelerin bir json listesini alır.

• 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} 
  ], 
  } 
  

:

Bu liste 4 elemanları içerir

Listeyi görüntülemek yeterince kolaydır. Ekranın bir parçası olarak, her bir öğe için bir maliyet girmelidir.

<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> 

Uygulama, girilen maliyetin, öğenin maksimum maliyetinden küçük veya ona eşit olduğunu doğrulamalıdır. Ürünün maksimum maliyeti aşılırsa uygulama, maliyeti maksimum maliyete ayarlamalıdır.

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

},

jsfiddle bakınız:

https://jsfiddle.net/daanjacobs/0ym20pye/6/ Ben eminim, herhangi bir yardım için teşekkür ederiz ben eksik olduğumu küçük bir şeydir. Sizin v-on sözdizimi hatalı

Answer 1

.

yanlış: sağ

v-on="change: ..." 

:

v-on:change="..." 

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