How Can I Know In Which Component I Was There

Question

I am working with vue js, and I have dargable component items, I generated dragable component using for loop to display component, so how can i detected in which component I am there, when click on component.

This is 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 this is 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; 
                // its not working just for one 
               // component, it working for all component and  I need 
              //  to implment to one component specific 
             // current component
       }
  } 
}
</script>

Answer 1

Edited following comments.

A bit complicated but does the trick. https://jsfiddle.net/guillaumedeslandes/t12k43ov/

Added events to trigger a forced-close state, and had to store the item state in the parent component to allow draggable to manipulate it while keeping the order.