特定のVue子コンポーネントのトグルモデル

Question

私のアプリケーションのnavbarには、1つの親コンポーネントと2つのタイプの子コンポーネントがあります。

<template> 
    <div class="be-submenu__inner"> 
     <ul class="be-submenu__categories"> 
      <category-tab name="Events" @setActive="toggleActive"></category-tab> 
      <category-tab name="Articles" @setActive="toggleActive"></category-tab> 
     </ul> 
     <news-cards></news-cards> 
    </div> 
</template> 

<script> 
import NewsCards from './NewsCards.vue' 
import CategoryTab from './CategoryTab.vue' 

export default { 
    name: 'be-nav-submenu-news', 
    data() { 
     return{ 
      queryCategory: null, 
      posts: '' 
     } 
    }, 
    methods: 
     toggleActive: function (selectedTab) { 
      console.log(selectedTab) 
     } 
    }, 
    components: { 
     CategoryTab, 
     NewsCards 
    } 
} 
</script> 

category-tabコンポーネント：

親Vueのコンポーネントは、次のコードを持っている

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

<script> 
    export default { 
     name: 'be-category-tab', 
     data() { 
      return { 
       titleStyle: 'be-submenu__category-link' 
      } 
     }, 
     props: { 
      name: { 
       required: true 
      }, 
      isActive: { 
       required: false, 
       default: false 
      } 
     }, 
     methods: { 
      setActive: function() { 
       this.$emit('setActive', this.name) 
      } 
     } 
    } 
</script> 

私がやりたいことを、私はそれらのいずれかの上に私のカーソルを置いたら、タブの状態を更新することです。 2番目のタブをホバーし、プロパティーisActiveがtrueに設定されるとします。他のコンポーネントは非アクティブになり、<news-cards>コンポーネントのコンテンツも選択したタブに従って更新されます。

'be-category-tab'という名前の子要素を何とか追跡して、カスタムイベントがトリガーされるとその状態を更新する必要があるとします。 Vueのドキュメントでは、私がカスタムイベントについて混乱してしまったので、今私はそれをまったく使ってもわかりません。

私はここに私の次のステップになるかもしれない手がかりを与えてもらえますか？あるいは、別のものを使うべきですが、カスタムイベントです。前もって感謝します。

Answer 1

試してみてください。

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>