[Vuejs]-Toggle model for a specific Vue child component

by

0👍

✅

Try :

Vue.component('category-tab', {
  template: '<li class="be-submenu__category">' +
    '<a :class="[titleStyle, { \'is-active \': isActive }]" @mouseover="setActive">' +
    '{{ this.name }} {{ this.isActive }}' +
    '</a></li>',

  data() {
    return {
      titleStyle: 'be-submenu__category-link'
    }
  },
  props: {
    name: {
      required: true
    },
    isActive: {
      default: false
    }
  },
  methods: {
    setActive: function() {
      this.$emit('setactive')
    }
  }
});

Vue.component('news-cards', {
  template: '<div>New Cards : {{ proptest }}</div>',
  props: { proptest: { default: ''} }
});


new Vue({
  el: "#app",
  data() {
    return {
      categoriesTab: [{
        name: 'Events',
        isActive: false
      }, {
        name: 'Articles',
        isActive: false
      }, {
        name: 'Other category...',
        isActive: false
      }],
      queryCategory: null,
      posts: '',
      name: ''
    }
  },
  methods: {
    deactiveAllCategories: function()  {
      for (var i = 0, length = this.categoriesTab.length; i < length; i++)  {
        this.categoriesTab[i].isActive = false;
      }
    },
    setActive: function(category) {
      this.deactiveAllCategories();
      this.name = category.name;
      category.isActive = true;
    }
  },
});
.be-submenu__category{
  cursor: pointer;
}

.is-active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
  <div class="be-submenu__inner">
    <ul class="be-submenu__categories">

      <category-tab v-for="(category, index) in categoriesTab" @setactive="setActive(category)" :name="category.name" :is-active="category.isActive" :key="category">
      </category-tab>

    </ul>
    <news-cards :proptest="name"></news-cards>
  </div>
</div>

Leave a comment