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>