Objet de données d'accès aux composants Vue

Question

Comment puis-je vérifier si un objet possède un élément enfant à l'intérieur des propriétés calculées? EX. J'ai besoin de vérifier la fonction du sous-menu lors du clic, sur la page de chargement et passer le sous-menu ouvert par défaut, Comment puis-je accéder à l'objet actuel sur la fonction du sous-menu?

HTML et modèle:

<template id="ids-sidebar-menu-template"> 
    <li v-for="li in list" > 
     <a href="@{{ li.url }}" @click="toggle" > 
      @{{li.title}} 
      <span v-if="submenu" class="right"> + </span> 
     </a> 
     <ul v-show="open" v-if="submenu"> 
      <ids-sidebar-menu :list="li.children"></ids-sidebar-menu> 
     </ul> 
    </li> 
</template> 

Component Vue:

Vue.component('ids-sidebar-menu', { 
    template : '#ids-sidebar-menu-template', 
    props: { 
     list : Array 
    }, 
    data: function() { 
     return { 
      open: false 
     } 
    }, 
    computed: { 
     submenu: function() { 
       return true; 
       // problem here 
      return this.children && this.children.length 
     } 
    }, 
    methods: { 
     toggle: function (e) { 
      e.preventDefault(); 
      if (this.submenu) 
       this.open = !this.open 
     } 
    } 
}); 

données:

var data = [ 
    { 
     title : 'Title 1', 
     url : '#', 
     children: [ 
      { 
       title : 'Subtitle 1', 
       url : '#' 
      }, 
      { 
       title : 'Subtitle 2', 
       url : '#' 
      }, 
      { 
       title : 'Subtitle 3', 
       url : '#' 
      } 
     ] 
    }, 
    { 
     title : 'Title 2', 
     url : '#' 
    } 
]; 

Vue:

var vm = new Vue({ 
    el : '#sidebar-menu', 
    data: { 
     links: data 
    } 
}); 

Answer 1

Le problème est que vous passez la liste entière à chacun des composants <ids-submenu-item>. Chaque composant d'élément de sous-menu ne doit recevoir que les éléments qu'il doit afficher, pas tous les liens. violon travail: https://jsfiddle.net/zvku6voo/2/

<ul id="sidebar-menu"> 
    <ids-sidebar-menu v-for="item in links" :line="item"></ids-sidebar-menu> 
</ul> 

<template id="ids-sidebar-menu-template"> 
    <li> 
     <a href="{{ line.url }}" @click="toggle" > 
      {{line.title}} 
      <span v-if="submenu" class="right"> + </span> 
     </a> 
     <ul v-show="open" v-if="submenu"> 
      <ids-sidebar-menu v-for="item in line.children" :line="item"></ids-sidebar-menu> 
     </ul> 
    </li> 
</template> 

js:

props: { 
     line : Object 
    }, 
    data: function() { 
     return { 
      open: false 
     } 
    }, 
    computed: { 
     submenu: function() { 
      return this.line.children && this.line.children.length 
     } 
    },