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

VueJS - Fire a method in a v-for loop

本文关键字：方法 一个 v-for 循环 VueJS      更新时间：2023-09-26

好的...

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

这并不能回答您的特定问题（如何触发方法）...但是，您可能能够使用数据绑定来解决问题。

爪哇语 

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。

相关文章：