如何将 for 循环中的当前项目传递给 vue.js 2 中的方法？答案

【问题标题】：How do I pass the current item in a for loop to a method in vue.js 2?如何将 for 循环中的当前项目传递给 vue.js 2 中的方法？
【发布时间】：2017-08-12 06:54:26
【问题描述】：

我正在 vue.js 2 中构建（作为练习）一个购物车。我将商店商品和订单商品存储在我的 vue 数据数组中，并在 for 循环中为每个商店商品呈现一个按钮以添加商品到订单（例如推送）。

这是我的 vue 数据中包含商店数组中的商品列表的代码部分：

<fieldset>
    <legend>Shop</legend>
    <section v-if="shop">
        <article v-for="(item, index) in shop">
            <header><h1>{{ item.title }}</h1></header>
            <p>{{ item.description }}</p>
            <footer>
                <ul>
                    <li>${{item.price}}</li>
                    <!-- find a way to set input name -->
                    <li><label>Quantity <input type="number" name=""></label></li>
                    <li><button v-on:click="addItemToOrder($event)">Add to Order</button></li>
                </ul>
            </footer>
        </article>
    </section>
    <p v-else>No Items to Display</p>
</fieldset>

这是我的 vue 元素：

new Vue({
    el: '#my-order',
    data:{
        'shop':[
            {
                'title':'Website Content',
                'description':"Order your Website content by the page. Our search-engine-optimized web content puts you ahead of the competition. 250 words.",
                'price':25,
                'sku':'web001'
            },
            {
                'title':'Blog Post',
                'description':"We write blog posts that position your website as a go-to resource for expert knowlegde.",
                'price':50,
                'sku':'blog001'
            },
            {
                'title':'Twitter Post'
            },
            {
                'title':'Product Description'
            }
        ],
        'customizations':null,
        'order':{
            'items':null,
            'total':null
        },
        'customer':null,
        'payment':null
    },
    methods:{
        addItemToOrder: function(){
          /* Here is where I need to append the item to the cart */
        }
    }
})

如何将for 循环中的项目传递给订单（例如：将其附加到 order.items）？

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

您只需将item 作为参数传递给函数。

v-on:click="addItemToOrder(item)"

然后你就可以在你的 Vue 组件中使用它了

addItemToOrder: function(item){
    this.order.items.push(item);
}

确保将 order.items 初始化为组件内的一个空数组 data，以便您可以推送到它。

'order':{
     'items': [],
     'total': 0
},

一般来说，如果您知道数据类型，最好将数据初始化为正确的数据类型。

【讨论】：

不工作。我什至尝试直接在this.order.items.push('hello') 中传递一个字符串，但无济于事。有趣的是，alert('hello') 有效。
它可能不起作用，因为您需要将items 初始化为data 中的一个空数组。你不能向null 推送任何内容。我将编辑我的答案。

【解决方案2】：

我意识到这有点晚了，但万一其他人发生在这个线程中......

你需要传入事件以及item

在你的 vue 代码中

someMethod : function(e, item){}

在你的 html 中

<a v-on:click="someMethod($event, $data)"></a>

【讨论】：

您好，谢谢，这对我有帮助，但您能解释一下 $event 的作用是某种触发改变吗？
@user3808955 该事件是点击事件，如果你为一个dom元素注册了一个点击处理函数，事件会被传递给监听器。