[SOLVED] How to achieve this kind of Operation in Vue JS?

How to achieve this kind of Operation in Vue JS?

I'm Building a tree-like structure in vue. I tried to do this with the data function but in that case, all the elements in the same level of the tree getting these classes although I just want clicked element to achieve this I tried this with the ref but don't know how to achieve that parent element selector part with it as I'm new to Vue till now i don't know how to tackle this .

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

Solution

Please take a look at one of solutions (if I understood you correctly) in following snippet

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>