鍍金池/ 問(wèn)答/HTML/ vueJS中樹(shù)形圖全打開(kāi)的問(wèn)題

vueJS中樹(shù)形圖全打開(kāi)的問(wèn)題

現(xiàn)在因?yàn)閷?xiě)了this.open = !this.open所以全部?jī)?nèi)容都能展開(kāi),能否提供一下怎么修改成點(diǎn)擊一個(gè)其他都關(guān)閉只顯示一個(gè)二級(jí)菜單的形式。有想過(guò)綁定標(biāo)識(shí),但是這種寫(xiě)法會(huì)一起綁定上。

<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>
回答
編輯回答
憶當(dāng)年

應(yīng)該是你點(diǎn)擊拿到的 item中唯一的key 是否等于v-for中的item的key 已經(jīng)item.children為真來(lái)展開(kāi)

2018年1月20日 04:19