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:{{data.name}}You have to pass
categoryIddown the component tree (:category-id="categoryId"):
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; }- {{data.name}} {{data.name}}
讨论(0)
加载中...
- 热议问题