for 루프의 현재 항목을 vue.js 2의 메서드에 전달하려면 어떻게 해야 합니까?

for 루프의 현재 항목을 vue.js 2의 메서드에 전달하려면 어떻게 해야 합니까?

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오더에 루프(예: add it to order.disply)

그냥 통과만 하면 돼item함수에 대한 파라미터로 지정합니다.

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

그런 다음 Vue 컴포넌트를 사용할 수 있습니다.

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

반드시 초기화해 주세요.order.items컴포넌트 내의 빈 어레이로 이행합니다.data밀어붙일 수 있게 말이야

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

일반적으로 데이터를 올바른 데이터 유형으로 초기화하는 것이 좋습니다.

좀 늦은 건 알지만 혹시라도 누군가 이 일을 겪게 되면...

이벤트도 통과해야 하고 아이템도 통과해야 합니다.

vue 코드로

someMethod : function(e, item){}

html에서

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

언급URL : https://stackoverflow.com/questions/42913031/how-do-i-pass-the-current-item-in-a-for-loop-to-a-method-in-vue-js-2