Так что, если я реализую в моем случае, категория опасности активна. Но родительская категория (категория Англия и категория Челси) не открывается напрямую при выполнении скрипта. Сначала я должен нажать на родительскую категорию. Если категория опасности активна, родительская категория открывается напрямую
я есть два компонента VUE.
Мой первый компонент (родительский компонент) выглядит так:
<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>
Мой второй компонент (дочерний компонент) выглядит так:
<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>
Если опораcategoryId = id категория в данныхcategoriesтогда я хочу, чтобы категория была активной.
В моем коде я хочу, если код выполняется, категория опасности активна, как это:
================================================== ========================
================================================== ========================
Как я могу это сделать?