如何在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>
我正在 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>