Get the id value from Velocity animate when the link is clicked

Question

Vue.component('accordion', {
  template: '#accordion',
  props: ['items'],
  methods: {
    openItem: function(item){
        item.isopen = !  item.isopen
    },
    
    setClass: function(item){
        if (item.isopen == true ) {
          return 'open'
        }
        return 'close'
    },
    
    enter: function(el, done){   
        Velocity(el, 'slideDown', {duration: 400,  
                                   easing: "easeInBack"},
                                  {complete: done})
    },
    
    leave: function(el, done){
        Velocity(el, 'slideUp', {duration: 400,  
                                 easing: "easeInBack"},
                                {complete: done})
    },
  }, 
})



var app = new Vue({
    el: '#wrapper',
    data: {
        items: [{
            id: 1,
            title: 'Competition law',
            content: 'Schärer Attorneys at Law advises and represents you on questions of unfair competition and the anti-trust law, for example, for company mergers, anti-trust investigations and for the drafting of distribution agreements.',
            isopen: false
        }, {
            id:2,
            title: 'Constitutional, community and administrative law',
            content: 'Civil law regulates privities of contract between private persons, communities of persons and corporations. On the other hand, constitutional, community and administrative law is concerned with the legal relationship between a private person and the community sector (federation, cantons, communities, associations of communities), or amongst communities. The specialists at Schärer Attorneys at Law act as advisers and consultants for private persons as well as communities, and represent them in the legal proceedings of objection and appeal.',
            isopen: false
        },
        {
            id:3,
            title: 'Construction, planning and environmental law',
            content: 'Our specialists in the fields of construction, planning and environmental law advise and represent builders, planners and architects, corporations, affected neighboring communities and associations of communities in:',
            isopen: false
        }]
    }
})

@import 'https://fonts.googleapis.com/css?family=Cantata+One|Noto+Sans:400,400i,700,700i&subset=latin-ext';

li {
  list-style:none;
  cursor:pointer;
  font: 22px/48px 'Cantata One', serif;
}
li>div {
  font: 14px/22px 'Noto Sans', serif;
  padding-bottom:20px;
}

.item {
  overflow:hidden;
  width:600px;
}

.arrow_box {
  width:10px;
  height:10px;
  transition: all .3s;
  padding-bottom:0px;
  position:absolute;
  margin:20px 0px 0px -15px;
  
}


.arrow_box:after, .arrow_box:before {
    border: solid transparent;
    content: " ";
    position: absolute;
}

.arrow_box:after {
    border-width: 5px;
}
.arrow_box:before {
    border-left-color: #000;
    border-width: 5px;
}

.arrow_box--open{
   transform: rotateZ(90deg);
   transform-origin: 50% 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="wrapper">
  <accordion :items="items"></accordion>
</div>
<template id="accordion">
  <ul>
    <li v-for="item in items" @click="openItem(item)">
      <div class="arrow_box" :class="{'arrow_box--open' : item.isopen}"></div>
      {{item.title}}
      <transition v-on:enter="enter" v-on:leave="leave">
        <div v-show="item.isopen" class="item">
           {{item.content}}
        </div>  
      </transition>
    </li>
  </ul>
</template>

How do I get the items id property when I click the link? For example, for the first link, id value will be 1. I tried to add console.log(el.id) in enter method but it is empty. I don't want to show the id in the ui but I need to do something with with id property in the methods.

Answer 1

1. "I tried to add console.log(el.id) in enter method but it is empty"

   It is empty because the enter method does not receive the item as a parameter.

2. "How do I get the items id property when I click the link?"

   The openItem method receives the item as a parameter, you can console.log(item.id) there and do anything with the id.

If you really need to use the id in the enter method, you may need to add the id as an id, reference, class, or dataset attribute in the transition element, so that you can access it from the el parameter.