VueJs 2 fetching data from json to make navigation

Question

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:

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

Saurabh · Accepted Answer · 2017-05-27 05:04:52Z

1

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>

edited May 27, 2017 at 5:04

answered May 25, 2017 at 7:23

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bas Over a year ago

please remove the first li and put the v-for into the router-link and add exact. <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>

Saurabh Over a year ago

@Bas Thanks for making it better :)

Collectives™ on Stack Overflow

VueJs 2 fetching data from json to make navigation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related