如何在 vue 组件的树视图中激活子类别？

我有两个 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>

If prop categoryId = id数据中的类别categories，那么我希望该类别处于活动状态。

在我的代码中，我希望如果代码执行，类别危险会像这样活跃：

=================================================== =======================

=================================================== =======================

我该怎么做？

两个实际上缺失的东西：

• 你必须添加有条件的class属性 https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax (: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}}</a>
  

• 你必须通过categoryId沿着组件树向下（: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>
  

下面演示。

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>