How Can I Activate Child Category In Treeview On The Vue Component?
I have two vue components. My first component (parent component) like this: ...
Solution 1:
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}"><spanclass="fa fa-fw fa-circle-o"></span> {{data.name}}</a>You have to pass
categoryIddown the component tree (:category-id="categoryId"):<ulv-if="isFolder":class="isShow"><list-categoryv-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() {
returnthis.data.children && this.data.children.length
},
isShow() {
returnthis.open ? 'show' : 'hide'
}
},
methods: {
toggle() {
this.open = !this.open
}
}
})
newVue({
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;
}<scriptsrc="https://unpkg.com/vue"></script><divid="app"><div><ulclass="filter-category"v-for="list in categories"><list-category:data="list":category-id="categoryId"></list-category></ul></div></div><templateid="lc"><li><!--parent--><av-if="isFolder"href="javascript:" @click="toggle"><spanclass="fa fa-fw":class="icon"></span> {{data.name}}
</a><!--if not folding, we do not need an binding event--><av-elsehref="javascript:":title="data.name":class="{active: data.id === categoryId}"><spanclass="fa fa-fw fa-circle-o"></span> {{data.name}}</a><!--children--><ulv-if="isFolder":class="isShow"><list-categoryv-for="(data, index) in data.children":key="index":data="data":search="search":category-id="categoryId"></list-category></ul></li></template>
Post a Comment for "How Can I Activate Child Category In Treeview On The Vue Component?"