如何在Vue JS中实现这种操作?

How to achieve this kind of Operation in Vue JS?

我正在 vue 中构建树状结构。我尝试使用数据函数来执行此操作,但在那种情况下,树的同一级别中的所有元素都会获得这些 类 尽管我只想单击元素来实现此目的我尝试使用 ref 但没有知道如何用它来实现父元素选择器部分,因为我是 Vue 的新手,直到现在我还不知道如何解决这个问题。

this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");

请查看以下代码段中的一种解决方案(如果我理解正确的话)

new Vue({
  el: '#demo',
  data() {
    return {
      tree: [
        {parent: 'AAA', childs: []},
        {parent: 'BBB', childs: [{child: 'bbb'}, {child: 'ccc'}]},
        {parent: 'CCC', childs: [{child: 'ddd'}, {child: 'eee'}, {child: 'fff'}]},
        {parent: 'DDD', childs: []}
      ],
      selected: null,
      active: null
    }
  },
  methods: {
    select(item, idx) {
      if (this.tree[idx].childs.length) {
        this.selected = idx
        this.active = null
      } else {
        this.active = item.parent + idx
        this.selected = null
      }
    },
    activate(itm, i) {
      this.active = itm.child + i
    }
  }
})
li {
 cursor: pointer;
}
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="(item, idx) in tree" :key="idx">
      <p @click="select(item, idx)" :class="active === item.parent + idx ? 'active' : ''">{{ item.parent }}</p>
      <ul v-if="selected === idx">
        <li v-for="(itm, i) in item.childs" :key="i">
          <p @click="activate(itm, i)" :class="active === itm.child + i ? 'active' : ''">{{ itm.child }}</p>
        </li>
      </ul>
    </li>
  </ul>
</div>