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

Question

我已将以下json提取到导航循环中。 这有效，但是当我将{{item.navitems.navitem.name}}粘贴到=＆＃34;＆＃34;我收到了这个错误。

我如何实现这项工作？

错误：

循环：

<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>