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 - 列出每个项目的项目操作和验证

1 个答案: