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

Question

好的...

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

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

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

VueJS - Fire a method in a v-for loop

javascript

vue.js