vuejs 引导卡片组件动画答案

【问题标题】：vuejs bootstrap card component animationvuejs 引导卡片组件动画
【发布时间】：2018-07-01 01:47:04
【问题描述】：

我有一个 users 数组，并在循环中显示卡片组件中的每个用户，我希望在单击卡片时将带有动画的卡片展开到全宽以显示用户详细信息并隐藏其他卡片，my code on codepen 我的问题是动画，如何顺利隐藏其他卡片并将点击的卡片展开到整行（col-12）。

Vue.component('card', {
  props: ['user','index'],
  template:`
<div class="col-6 col-lg-3 mb-3">
    <div class="card step">
        <div class="card-body p-3 clearfix" @click="view(index)">
            name: {{ user.name }}
        </div>
    </div>
</div>`,
  methods: {
    view(index) {
      this.$emit('on-view', index);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    users:[{name:'john',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
           {name:'mike',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
           {name:'kevin',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
           {name:'david',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
          {name:'sasha',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}],
    detailMode: false
  },
  methods: {
    onDetailMode(index) {
      console.log(index);
      this.detailMode = true;
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app" class="container-fluid mt-4">
  <div class="row">
    <card :user="user" :index="index"
          v-for="(user,index) in users"
          @on-view="onDetailMode"></card>
  </div>
</div>

【问题讨论】：

标签： css vue.js vuejs2 css-animations vue-component

【解决方案1】：

您可以在主组件中使用数据：

data: {
    selectedUser: null,
    user: [...]
}
methods: {
   select (id) {
       this.selectedUser = id;
   }
}

在你的组件中添加一个属性：

Vue.component('card', {
   props: ['user','index', 'details'],
   template:`
   <div class="col-6 col-lg-3 mb-3">
    <div class="card step">
      <div class="card-body p-3 clearfix" @click="view(index)">
          name: {{ user.name }}
       </div>
      <div v-show="details"> ... </div>
    </div> 
  </div>`,
 }
});

然后在循环中你可以添加适当的行为。

<div v-for="item in users" @click="selectedUser = item.id">
    <card :details="item.id === selectedUser"></card>
</div>

【讨论】：