单击链接时从 Velocity animate 获取 id 值

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>

当我点击链接时如何获取项目id 属性？例如，对于第一个链接，id 值为 1。我尝试在 enter 方法中添加 console.log(el.id) 但它为空。我不想在 ui 中显示 id，但我需要对 methods 中的 id 属性做一些事情。

Answer 1

1. "我尝试在 enter 方法中添加 console.log(el.id) 但它是空的"

   它是空的，因为enter 方法没有接收item 作为参数。

2. “点击链接时如何获取items id属性？”

   openItem 方法接收 item 作为参数，您可以在那里 console.log(item.id) 并使用 id 做任何事情。

如果确实需要在enter方法中使用id，可能需要将id作为id、reference、class或dataset属性添加到transition元素中，这样就可以从@访问987654327@参数。