I'm using Vue 3 and in a v-for loop, I'm creating multiple button elements. The buttons are being made in another component named wb-button. So I call wb-button in every v-for loop.

I add @click event listener to the wb-button that calls a method inside the current component, simple:

<div v-for="(item,key) in items" :key="key">
    <span>{{item.name}}</span>
    <wb-button @click="deleteItem(item)">
        Delete item!
    </wb-button>
</div>

This works how I want, the problem starts when I want to pass the wb-button just like a ref to the deleteItem method. The purpose is to make changes to another ref inside the wb-button. So what I basically want to do is this:

export default{
    name: 'listComponent',
    methods:{
        async deleteItem(item,wbButtonRef){
            // The next line is what I want to do
            wbButtonRef.$refs.btnElement.putInLoadingStatus()
            // do the delete item action
        }
    }
}

I know I can create a ref on each wb-button and pass an ID or something to the method, but I don't think it is the cleanest way to do it.

If there was something to just pass the wb-button element as the method parameter it would be great. Something like this:

    <!-- I want to know if there is something I can put in 
the second argument of the 'wb-button' @click event -->

    <wb-button @click="deleteItem(item, /* what to put here?*/)">

    <!-- "this","$this","$event.target" etc ... -->

I have tried $event.target but it returns the root element of wb-button, what I need is the wb-button itself just like a $ref.

CodePudding user response：

Simply put, you can't. And since this logic is relevant only for the button component itself, it's best to keep this logic within it. Adding a prop and render something based on that, like you suggested yourself in the comments, is a good way to go about it.