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/