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循环中触发方法

1 个答案: