Javascript 如果元素单击vue组件，如何添加活动类？

我的vue组件如下所示：

Vue.component（'list-category'{
模板：“#lc”，
道具：[“数据”、“类别”、“搜索”]，
数据（）{
返回{
开：错，
categoryId：这个类别
}
},
安装的（）{
让isDataOpen=（d）=>d.id==this.categoryId | | | d.children&&d.children.some（isDataOpen）；
this.open=isDataOpen（this.data）；
},
计算：{
图标（）{
返回{
‘fa plus’：！this.open，
“fa减号”：this.open，
}
},
isFolder（）{
返回this.data.children&&this.data.children.length
},
isShow（）{
返回此。打开？'show'：'hide'
}
},
方法：{
切换（）{
this.open=！this.open
},
filterByCategory（id）{
this.categoryId=id
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
类别：[{
id:1，
名称：“英格兰”，
儿童：[{
id:3，
名字：'切尔西'，
儿童：[{
id:7，
名称：“危险”
},
{
id:8，
姓名：“莫拉塔”
}
]
},
{
id:4，
名称：“曼联”，
儿童：[{
id:9，
姓名：“波格巴”
},
{
id:10，
名称：‘卢卡库’
}
]
}
]
},
{
id:2，
名称：“西班牙”，
儿童：[{
id:5，
名称：“皇家马德里”，
儿童：[{
id:11，
名字：“罗纳尔多”
},
{
id:12，
名称：“贝尔”
}
]
},
{
id:6，
名称：“巴塞罗那”，
儿童：[{
id:13，
名字：“梅西”
},
{
身份证号码：14，
姓名：“苏亚雷斯”
}
]
},
]
}
],
类别：7
}
}
})

.active{
背景：黄色；
}
.pd搜索过滤器>.panel body ul.filter-category{
左侧填充：0；
列表样式：无；
利润率：0-15px0；
}
.pd搜索过滤器>.panel body ul.filter-category>li a{
显示：块；
填充：10px 15px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.pd搜索过滤器>.panel body ul.filter-category>li a:最后一个子项{
左侧填充：45px；
}
.pd search filter>.panel body ul.filter-category>li a:focus，.pd search filter>.panel body ul.filter-category>li a:hover{
背景色：#eeeeee；
文字装饰：无；
}
.pd搜索过滤器>.panel body ul.filter-category>li a+ul{
左侧填充：0；
列表样式：无；
}
.pd搜索过滤器>.panel body ul.filter-category>li a+ul>li>a{
左侧填充：30px；
}
.表演{
显示：块！重要；
}
.隐藏{
显示：无！重要；
}

按类别

您无法从子组件控制父元素的数据。为了更改父级的数据，您需要将更改发送到父级，然后再从父级更改数据

请查找下面的内容，了解如何使用

this.$emit

。我知道我必须更改json数据以避免对同一模板的递归调用，但现在您知道了如何更改父数据元素

Vue.component（'list-category'{
模板：“#lc”，
道具：[“数据”、“类别”、“搜索”]，
数据（）{
返回{
开：错，
categoryId：这个类别
}
},
安装的（）{
让isDataOpen=（d）=>d.id==this.categoryId | | | d.children&&d.children.some（isDataOpen）；
this.open=isDataOpen（this.data）；
},
计算：{
图标（）{
返回{
‘fa plus’：！this.open，
“fa减号”：this.open，
}
},
isFolder（）{
返回this.data.children&&this.data.children.length
},
isShow（）{
返回此。打开？'show'：'hide'
}
},
方法：{
切换（）{
this.open=！this.open
},
filterByCategory:函数（id）{
此.$emit（'update-active-category'，id'）；
console.log（'发出：'+id）；
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
类别：[{
id:1，
名称：“英格兰”，
儿童：[{
id:3，
名字：'切尔西'，
儿童：[{
id:7，
名称：“危险”
},
{
id:8，
姓名：“莫拉塔”
}
]
},
{
id:4，
名称：“曼联”，
儿童：[{
id:9，
姓名：“波格巴”
},
{
id:10，
名称：‘卢卡库’
}
]
}
]
},
{
id:2，
名称：“西班牙”，
儿童：[{
id:5，
名称：“皇家马德里”，
儿童：[{
id:11，
名字：“罗纳尔多”
},
{
id:12，
名称：“贝尔”
}
]
},
{
id:6，
名称：“巴塞罗那”，
儿童：[{
id:13，
名字：“梅西”
},
{
身份证号码：14，
姓名：“苏亚雷斯”
}
]
},
]
}
],
类别：7
}
},
方法：{
UpdateActivate
<div id="app">
    ...
        <list-category :data="list" :category="category"></list-category>

<div id="app">
    ...
        <list-category :data="list" :category="category" @category="category = $event"></list-category>

<template id="lc">
    ...
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category="categoryId"></list-category>

<template id="lc">
    ...
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category="categoryId" @category="$emit('category', $event)"></list-category>

filterByCategory(id) {
  this.categoryId = id
}

filterByCategory(id) {
  this.$emit('category', id);
}

mounted() {
  let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
  this.open = isDataOpen(this.data);
},

watch: {
  category: {
    handler() {
      this.categoryId = this.category
      let isDataOpen = (d) => d.id === this.categoryId || d.children && d.children.some(isDataOpen);
      this.open = isDataOpen(this.data);
    },
    immediate: true
  }
}