Currently, I am utilizing vue js for a project where I have draggable component items. These components are generated using a for loop to display them. My question is, how can I detect which component I am currently on when I click on it?
Here is a snippet from my index.vue file :
import item from './component/itemComponent.vue';
<template>
<div>
<dragable
:element="ul"
v-modal="list">
<li v-for="(index, i) in list" :key="i">
<item :indexItem="index"></item
</li>
</dragable>
</div>
</template>
And here is the itemComponent.vue file :
<template>
<a
@click="getComponentAttributes()"
class="btn btn-primary">{{ intemIndex.name }} </a>
</template>
<script>
export default {
props:['indexItem'],
data(){
return {
isOpen: false
}
},
methods : {
getComponentAttributes(){
this.isOpen = true;
// My current issue is that this method affects all components,
// while I need it to specifically target the current component
}
}
}
</script>