[Vuejs]-Tabs with Vue in Laravel 5.8

by

0👍

new Vue({
  el: '#tabs',
  data() {
    return {
      activetab: 1
    }
  },
})
.active {
  background-color: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tabs" class="container">
  <div class="tabs">
    <a href="#" @click.prevent="activetab = 1" :class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>
    <a href="#" @click.prevent="activetab = 2" :class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>
  </div>

  <div class="content">
    <div v-if="activetab === 1" class="tabcontent">
      TEST 1
    </div>
    <div v-if="activetab === 2" class="tabcontent">
      TEST 2
    </div>
  </div>
</div>

0👍

It looks like your hyperlinks are set to use array syntax. You should probably change it to:

<div class="tabs"> 
    <a v-on:click="activetab=1" v-bind:class="{ active: activetab === 1}">Tab 1</a> 
    <a v-on:click="activetab=2" v-bind:class="{ active: activetab === 2}">Tab 2</a> 
</div>

Leave a comment