Плавное пролистывание на Vue.js

Question

<div class="col-md-6" v-for:="user in data">
 <p class="card-text text-center">{{ user.name }}</p> 
   <div class="table-responsive">
    <table class=" table table-bordered table-hover datatable datatable-User">
     <tbody>
       <tr>
         <td>Начало:</td>
         <td>{{ user.time }}</td>
      </tr>
     </tbody>
   </table>
  </div>
</div>


    data() {
        return{    
            data: [{name: Alex, time: 8.09.2020}, {name: Ivan, time: 8.09.2020}, {name: Olga, time: 8.09.2020}],

Подскажите как на Vue.js сделать чтоб был один блок и возможность листать влево в право для вывода всех данных массива ?

Answer 1

Например, вот так:

const app = new Vue({
  el: "#app",
  data() {
    return {
      dataUser: [{
        name: 'Alex',
        time: '8.09.2020'
      }, {
        name: 'Ivan',
        time: '8.01.2020'
      }, {
        name: 'Olga',
        time: '8.02.2020'
      }],
      indexActiveUser: 0
    }
  },
  computed: {
    activeUser() {
      return this.dataUser[this.indexActiveUser]
    }
  }
})

.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(20px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="app">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6">
        <table class="table table-bordered table-hover">
          <tbody>
            <tr v-for="(user, index) in dataUser" @click="indexActiveUser=index">
              <td>
                {{ user.name }}
                <span v-if="index === indexActiveUser" class="badge badge-primary">
                active
              </span>
              </td>
              <td>{{ user.time }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-6">
        <div class="card mb-2">
          <transition name="fade" mode="out-in">
            <div class="card-body" :key="indexActiveUser">
                <h5 class="card-title">{{activeUser.name}}</h5>
                <p class="card-text">{{activeUser.time}}</p>
            </div>
          </transition>
        </div>

        <button class="btn btn-light" @click="indexActiveUser--" :disabled="indexActiveUser <= 0">предыдущий</button>
        <button class="btn btn-light" @click="indexActiveUser++" :disabled="indexActiveUser === dataUser.length - 1">следующий</button>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Плавное пролистывание на Vue.js

Ответы (1 шт):