如何在 vue 组件的树视图中激活子类别? [英] How can I activate child category in treeview on the vue component?
问题描述
我有两个 vue 组件.
我的第一个组件(父组件)是这样的:
...<ul class="filter-category" v-for="list in category"><list-category :data="list" :category-id="categoryId"></list-category>...<脚本>...导出默认{...数据() {返回 {类别: [{编号:1，name: '英格兰',孩子们: [{编号:3，name: '切尔西',孩子们: [{id: 7, name: '危险'},{id:8，名称:'莫拉塔'}]},{编号:4，name: '曼联',孩子们: [{id: 9, name: 'Pogba'},{id: 10, name: 'Lukaku'}]}]},{编号:2，name: '西班牙',孩子们: [{编号:5，名称:'皇家马德里'，孩子们: [{id: 11, name: 'Ronaldo'},{id: 12, name: 'Bale'}]},{编号:6，name: '巴塞罗那',孩子们: [{id: 13, name: '梅西'},{id:14，姓名:'苏亚雷斯'}]},]}],类别 ID:7}}}我的第二个组件(子组件)是这样的:
<li><!--父母--><a v-if="isFolder" href="javascript:" @click="toggle"><span class="fa fa-fw" :class="icon"></span>{{data.name}}</a><!--如果不折叠，我们就不需要绑定事件--><a v-else href="javascript:" :title="data.name"><span class="fa fa-fw fa-circle-o"></span>{{data.name}}<!--孩子们--><ul v-if="isFolder" :class="isShow"><list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search"></list-category><脚本>导出默认{道具:['数据'，'categoryId']，数据() {返回 {打开:假}},计算:{图标() {返回 {'fa-plus': !this.open,'fa-minus': this.open,}},isFolder() {返回 this.data.children &&this.data.children.length},isShow() {返回 this.open ?'显示隐藏'}},方法: {切换(){this.open = !this.open}}}如果数据 categories 中的 prop categoryId = id 类别，那么我希望该类别处于活动状态.
在我的代码中，如果代码被执行，类别风险是这样的:
==========================================================================
==========================================================================
我该怎么做?
两个实际缺失的东西:
你必须添加条件class 属性 (
:class="{active: data.id === categoryId}") 使用对象语法:<a v-else href="javascript:" :title="data.name" :class="{active: data.id === categoryId}"><span class="fa fa-fw fa-circle-o"></span>{{data.name}}您必须将
categoryId向下传递到组件树 (:category-id="categoryId"):- <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category-id="categoryId"></列表类别>
下面的演示.
Vue.component('list-category', {模板:#lc"，道具:['数据'，'categoryId'，'搜索']，数据() {返回 {打开:假}},计算:{图标() {返回 {'fa-plus': !this.open,'fa-minus': this.open,}},isFolder() {返回 this.data.children &&this.data.children.length},isShow() {返回 this.open ?'显示隐藏'}},方法: {切换(){this.open = !this.open}}})新的 Vue({el: '#app',数据() {返回 {类别:[{编号:1，name: '英格兰',孩子们: [{编号:3，name: '切尔西',孩子们: [{编号:7，名称:'危险'},{编号:8，名称:'莫拉塔'}]},{编号:4，name: '曼联',孩子们: [{编号:9，姓名:'博格巴'},{编号:10，名称:'卢卡库'}]}]},{编号:2，name: '西班牙',孩子们: [{编号:5，名称:'皇家马德里'，孩子们: [{编号:11，名称:'罗纳尔多'},{编号:12，名称:'贝尔'}]},{编号:6，name: '巴塞罗那',孩子们: [{编号:13，名称:'梅西'},{编号:14，姓名:'苏亚雷斯'}]},]}],类别 ID:7}}}).active {背景:黄色；}<script src="https://unpkg.com/vue"></script><div id="应用程序"><div><ul class="filter-category" v-for="list in category"><list-category :data="list" :category-id="categoryId"></list-category><模板id="lc"><li><!--父母--><a v-if="isFolder" href="javascript:" @click="toggle"><span class="fa fa-fw" :class="icon"></span>{{data.name}}</a><!--如果不折叠，我们就不需要绑定事件--><a v-else href="javascript:" :title="data.name" :class="{active: data.id === categoryId}"><span class="fa fa-fw fa-圆-o"></span>{{data.name}}<!--孩子们--><ul v-if="isFolder" :class="isShow"><list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category-id="categoryId"></列表类别></template>
I have two vue components.
My first component (parent component) like this:
<template>
...
<ul class="filter-category" v-for="list in categories">
<list-category :data="list" :category-id="categoryId"></list-category>
</ul>
...
</template>
<script>
...
export default {
...
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
}
}
}
</script>
My second component (child component) like this:
<template>
<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"><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"></list-category>
</ul>
</li>
</template>
<script>
export default {
props: ['data', 'categoryId'],
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
}
}
}
</script>
If prop categoryId = id category in data categories, then I want the category active.
In my code, I want if the code executed, category hazard active like this:
==========================================================================
==========================================================================
How can I do it?
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>
这篇关于如何在 vue 组件的树视图中激活子类别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
