单击 link 时从 Velocity 动画获取 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>

如何在单击 link 时获得项目 id 属性？例如，对于第一个 link，id 值将为 1。我尝试在 enter 方法中添加 console.log(el.id) 但它是空的。我不想在 ui 中显示 id 但我需要在 methods.[=19= 中使用 id 属性做一些事情]

Answer 1

“我试图在输入方法中添加 console.log(el.id) 但它是空的”

它是空的，因为 enter 方法没有接收 item 作为参数。
“当我点击 link 时如何获取项目 ID 属性？”

openItem 方法接收 item 作为参数，您可以 console.log(item.id) 并使用该 id 执行任何操作。

如果确实需要在enter方法中使用id，可能需要在transition元素中添加id作为id，reference，class，或者dataset属性，所以您可以从 el 参数访问它。

单击 link 时从 Velocity 动画获取 id 值

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

vue.js

velocity.js