VueJS - 在 v-for 循环中触发一个方法

【问题标题】：VueJS - Fire a method in a v-for loopVueJS - 在 v-for 循环中触发一个方法
【发布时间】：2016-02-11 15:22:28
【问题描述】：

好的...

在 VueJS 中，我正在运行 v-for 来列出几个项目。例如：

v-for="item in cart"

Bananas - 1 dollar - Yellow
Apples - 2 dollar - Pink
Grapes - 1.5 dollar - Green

列出这些项目时，每个项目都有一个文本框，我可以在其中输入注释。问题是，我不想将此便笺保存在购物车中的商品对象中。我想将这些笔记保存在另一个 Vue 数据对象（笔记）中。保留对原始项目的引用会很好，但这不是必需的。

我认为用一种方法使这成为可能会很好。但我不想在每个生成的列表项上运行这种方法。所以我的问题：

如何在运行 v-for 循环时自动触发 Vue 方法？（没有即@click）

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这不能回答您的具体问题（如何触发方法）...但您也许可以使用数据绑定解决您的问题。

Javascript

new Vue({
    el: '#app',
    data: {
        cart: [
            { name: 'banana', color: 'yellow'},
            { name: 'apple', color: 'red'},
            { name: 'lime', color: 'green'},
        ],
        notes: []
    }
})

HTML

<div id="app">
    <div v-for="item in cart">
      {{ item.name }} - {{ item.color }}<br/>
      <input type="text" v-model="notes[$index]"/>
    </div>

    <pre>{{ $data | json }}</pre>
</div>

或者，如果您希望您的 notes 成为一个对象，您可以将 input 更改为：

<input type="text" v-model="notes[item.name]"/>

这是jsfiddle。

【讨论】：