How can I activate child category in treeview on the vue component?
I have two vue components.
My first component (parent component) like this:
...
-
Two actually missing things:
You have to add the conditional class attribute (
:class="{active: data.id === categoryId}") using the Object Syntax:<a v-else href="javascript:" :title="data.name" :class="{active: data.id === categoryId}"><span class="fa fa-fw fa-circle-o"></span> {{data.name}}</a>You have to pass
categoryIddown the component tree (:category-id="categoryId"):<ul v-if="isFolder" :class="isShow"> <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category-id="categoryId"></list-category> </ul>
Demo below.
Vue.component('list-category', { template: "#lc", props: ['data', 'categoryId', 'search'], data() { return { open: false } }, computed: { icon() { return { 'fa-plus': !this.open, 'fa-minus': this.open, } }, isFolder() { return this.data.children && this.data.children.length }, isShow() { return this.open ? 'show' : 'hide' } }, methods: { toggle() { this.open = !this.open } } }) new Vue({ el: '#app', data() { return { categories: [{ id: 1, name: 'England', children: [{ id: 3, name: 'Chelsea', children: [{ id: 7, name: 'Hazard' }, { id: 8, name: 'Morata' } ] }, { id: 4, name: 'Manchester United', children: [{ id: 9, name: 'Pogba' }, { id: 10, name: 'Lukaku' } ] } ] }, { id: 2, name: 'Spain', children: [{ id: 5, name: 'Real Madrid', children: [{ id: 11, name: 'Ronaldo' }, { id: 12, name: 'Bale' } ] }, { id: 6, name: 'Barcelona', children: [{ id: 13, name: 'Messi' }, { id: 14, name: 'Suarez' } ] }, ] } ], categoryId: 7 } } }).active { background: yellow; }<script src="https://unpkg.com/vue"></script> <div id="app"> <div> <ul class="filter-category" v-for="list in categories"> <list-category :data="list" :category-id="categoryId"></list-category> </ul> </div> </div> <template id="lc"> <li> <!--parent--> <a v-if="isFolder" href="javascript:" @click="toggle"> <span class="fa fa-fw" :class="icon"></span> {{data.name}} </a> <!--if not folding, we do not need an binding event--> <a v-else href="javascript:" :title="data.name" :class="{active: data.id === categoryId}"><span class="fa fa-fw fa-circle-o"></span> {{data.name}}</a> <!--children--> <ul v-if="isFolder" :class="isShow"> <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category-id="categoryId"></list-category> </ul> </li> </template>讨论(0)
加载中...
- 热议问题