Trouble iterating over array using :v-for

Question

I am attempting to iterate over a simple array using the v-for directive in my Nuxt.js App. Please see below.

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <nuxt-link class="navbar-brand" to="/"> 
            <img class="image nav-logo" :src="logoSrc" alt="Logo" />
        </nuxt-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav" >
                <li :v-for="link in links" :key="link.label">
                    {{ link.label }}
                </li>
            </ul>
        </div>
    </nav>
</template>

<script>
    const linkArray = [
        {
            label: "Home",
            href: "/",
            class: ""
        },
        {
            label: "ABout",
            href: "/",
            class: ""
        },
        {
            label: "Our Menu",
            href: "/",
            class: ""
        },
        {
            label: "Contact Us",
            href: "/",
            class: "db-outline-cta"
        }
    ]

    export default {
        name: "Nav",
        data() {
            return {
                logoSrc: '/img/davidsbarlogo.png',
                links: linkArray
            }
        }
    }
</script>

As you can see, this is my component. I am going to be dynamically getting data for this component inside asyncData() later on when my cms is wired up, but I wanted to have some placeholder content.

I am repeatedly getting this error:

ERROR [Vue warn]: Error in render: "TypeError: Cannot read property 'label' of undefined" 00:00:49

I have tried with and wihtout the :key property, I know I should include one. I am fairly new to vue, if anyone has a recommendation I would be most grateful.

` 9:17 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key` if i remove it, i get this — Vladimir Mujakovic
– Vladimir Mujakovic, Commented Jul 29, 2020 at 4:09
Then just add the :key :key="link.label like you have in the example(I am assuming you deleted it). — Tony
– Tony, Commented Jul 29, 2020 at 4:14

milmal · Accepted Answer · 2020-07-29 05:34:13Z

1

<ul class="navbar-nav">
  <li v-for="link in links" :key="link.label">{{link.label}}</li>
</ul>

Works like a charm https://codesandbox.io/s/recursing-kapitsa-rnr4h

answered Jul 29, 2020 at 5:34

milmal

5711 gold badge9 silver badges16 bronze badges

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

Comments

Tony · Accepted Answer · 2020-07-29 05:00:03Z

1

Try this

<li v-for="(link, index) in links" :key="index">
  {{ link.label }}
</li>

However, using index as key isn't the best practice (as explained in this post) but since there's no truly unique id in your link object, this will do.

answered Jul 29, 2020 at 5:00

Tony

1,4423 gold badges11 silver badges22 bronze badges

1 Comment

Vladimir Mujakovic Over a year ago

Thank you, as it turns out. Some linter plug-in was throwing an error. I mistakenly thought I have to add the colon in front of v-for, adding the key prop fixed the issue (along with uninstalling the linter)

Collectives™ on Stack Overflow

Trouble iterating over array using :v-for

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related