now all the contents can be expanded because this.open =! this.open is written. Can you provide how to change it to click on one other to turn off showing only a second-level menu? I have thought about binding the logo, but this way of writing will be bound together.
<template>
<li class="tree-menu-list">
<a @click="toggle();sendParams()">
<i v-if="isFolder" class="iconfont" :class="[open ? "icon-jiantouarrow487": "icon-iconfontjiantou"]"></i>
<i v-if="!isFolder" class="iconfont"></i>
{{ model.menuName }}
</a>
<ul v-show="!open" v-if="isFolder">
<tree-menu v-for="(item, index) in model.children" :model="item" :key="index"></tree-menu>
</ul>
</li>
</template>
<script>
export default {
name: "treeMenu",
props: ["model"],
data () {
return {
open: false,
isFolder: this.model.children && this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
sendParams: function () {
this.$router.push({
path: "./info",
name: "info",
query: {
id: this.model.id,
name: this.model.menuName
}
})
}
}
}
</script>