鍍金池/ 問答/HTML/ 請教下,我用vue寫了個樹形圖,但是都會一起顯示,我想操作點擊就顯示一個怎么改?

請教下,我用vue寫了個樹形圖,但是都會一起顯示,我想操作點擊就顯示一個怎么改?

請教下,我用vue寫了個樹形圖,但是都會一起顯示。

我想操作點擊就顯示一個怎么改?

<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,
      currentTab: false,
      isFolder: this.model.children && this.model.children.length ? true : false
    }
  },
  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>
回答
編輯回答
情皺

沒圖,看不懂你說什么。貼出的代碼耦合太高無法重現(xiàn)
我猜想你是要這個效果

<template>
  <ul>
    <li class="tree-menu-list">
      <a @click="toggle()">
        <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"  >
        <li v-for="(item, index) in model.children" :model="item" :key="index" v-text="item"  @click="sendParams(index)"></li>
        <!--<tree-menu v-for="(item, index) in model.children" :model="item" :key="index"></tree-menu>-->
      </ul>
    </li>
  </ul>
</template>
export default {
  name: 'HelloWorld',
//  props: ['model'],
  data () {
    return {
      model:{
        id:1314,
        menuName:'一級菜單',
        children:[
          '二級菜單1',
          '二級菜單2',
          '二級菜單3',
          '二級菜單4',
        ],
      },
      open: false,
      currentTab: false,
      isFolder: false,
//      isFolder: this.model.children && this.model.children.length ? true : false

    }
  },
  created(){
    this.isFolder=this.model.children && this.model.children.length
  },
  methods: {
    toggle: function () {
      console.log(this.isFolder);
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    sendParams: function (i) {
      console.log(this.model.children[i]);
//      this.$router.push({
//        path: '/info',
//        name: 'info',
//        query: {
//          id: this.model.id,
//          name: this.model.menuName
//        }
//      })
    }
  }
}
</script>
2017年6月23日 20:32