Vuejs - 列表项操作和每个项目的验证

Question

该应用收到一个 json 项目列表。

此列表包含 4 个元素：

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

显示列表很简单。作为显示的一部分，必须为每件商品输入成本。

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

Vuejs - 列表项操作和每个项目的验证

Vuejs - list item manipulation and verification per item

vue.js