vueJS中树形图全打开的问题

Question

现在因为写了this.open = !this.open所以全部内容都能展开，能否提供一下怎么修改成点击一个其他都关闭只显示一个二级菜单的形式。有想过绑定标识，但是这种写法会一起绑定上。

<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>

Answer 1

应该是你点击拿到的 item中唯一的key 是否等于v-for中的item的key 已经item.children为真来展开