CODEWITHSUNDEEP
vuejs2
Bas
Bas

Reputation: 2400

VueJs 2 fetching data from json to make navigation

I have fetched the following json into my navigation for loop. This works, but when i paste {{item.navitems.navitem.name}} into to="" i am getting this error.

How can i achieve this working?

Error:

enter image description here

Loop:

<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"
      }
    }
  }
]

Upvotes: 0

Views: 266

Answers (1)

Saurabh
Saurabh

Reputation: 73619

It seems that you need a null check, like following:

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

Edit: as par suggestion, making it more concise:

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

Upvotes: 1

Related Questions