VueJs 2从json中获取数据以进行导航

Question

我已将以下json导入到我的导航循环中。 这工作，但是当我粘贴{{item.navitems.navitem.name}}到=“”我得到这个错误。

我该如何做到这一点？

错误：

循环：

<ul class="nav navbar-nav"> 
    <li v-for="item in items"> 
     <router-link to="" tag="li" active-class="active"><a>{{item.navitems.navitem.name}}</a></router-link> 
    </li> 
</ul> 

JSON：

[ 
    { 
    "navitems": { 
     "navitem": { 
     "name": "Home", 
     "url": "" 
     } 
    } 
    }, 
    { 
    "navitems": { 
     "navitem": { 
     "name": "About", 
     "url": "/about" 
     } 
    } 
    } 
] 

Answer 1

看来你需要一个空检查，如下列：

<ul class="nav navbar-nav"> 
    <li v-for="item in items"> 
     <router-link v-if="item.navitems && item.navitems.navitem" :to="item.navitems.navitem.name" tag="li" active-class="active"> 
      <a>{{item.navitems.navitem.name}}</a> 
     </router-link> 
    </li> 
</ul> 

编辑：与参数的建议，使之更加简洁：

<ul class="nav navbar-nav"> 
    <router-link v-for="item in items" v-if="item.navitems && item.navitems.navitem" :to="item.navitems.navitem.url" tag="li" active-class="active" exact> 
     <a>{{item.navitems.navitem.name}}</a> 
    </router-link> 
</ul>