How to add interactivity to the created records using v-for (namely, when the mouse button is pressed, call the function)?

Question

Vue.js

Actually the question is in the title.
I'm trying to get interactivity for the delete key and trash can in a tutorial project.
Vue.js is just getting started.

Here is the html part:

<div class="basket">
     <div class="basket-goods-list">
            <basket v-for="item in goodsListItems" v-bind:item="item" v-bind:key="item.name">
            </basket>
     </div>
</div>

and here is the js code:

Vue.component('basket', {
    props: ['item'],
    template: `
    <div class="basket-goods-list_item">
        <span class="basket-goods-list_item-txt">
            {{item.name}}: цена: {{item.price}}; кол-во: {{item.count}}
        </span>
        <div class="basket-goods-list_item-del-btn" 
            @click="removeFromBasket">
            Удалить
        </div>
    </div>`
})

let basketElement = new Vue({
    el: '.basket',
    data: {
        goodsListItems: basket.goodList
    },
    methods: {
        removeFromBasket() {
            console.log('remove')
        }
    }
})

As a result, I see in the browser:


But this is what is in the browser console:

and the buttons do not work (in principle, it is clear why from the console)

I repeat the question: How can I add interactivity to the created records using v-for (namely, when the mouse button is pressed, call the function)?

Answer 1

In the child component, handle the click on the delete button like this: @click="$emit('remove')".
And in the parent component subscribe to this event: @remove="removeFromBasket(item)".