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

Question

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

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

Answer 1

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

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>

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

How to achieve this kind of Operation in Vue JS?

javascript

vue.js

vuejs2

refs