2

I have below navbar in Vue. When I pass an array to it it doesn't show the menu.

<template>
  <div>
    <div class="mt-5 px-2">

    <li v-for="item in items" :key="item.name">

      <a
        href="item.link"
        class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"
      >
        <svg
          class="mr-4 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
          stroke="currentColor"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"
          />
        </svg>

      {{ item.name }}

       </a>
    </li>
    </div>
  </div>
  <!--
 items: [
      { name: 'Foo' },
      { link: 'Bar' }
    ]
  -->
</template>

<script>
export default {
  name: 'Nav',
  props: ['items'],
  data() {
    return {
      parents: [],
    };
  },
};
</script>

<style scoped></style>
Improve this question
3
  • What do you mean by dynamic? Dynamic generally means that you want content to update automatically or have some background processing. In general, you would add that in <script> tags within the Vue component. It's hard for us to give you more help without some more information. Commented Mar 4, 2020 at 23:20
  • @danielhep: I have updated the question. Thanks. Commented Mar 9, 2020 at 21:21
  • 1
    The array you should pass to this component is -> [{name: 'a', link: 'http://a.com'}, {name: 'b', link: 'http://b.com'}]. This is the array that you pass? Commented Mar 9, 2020 at 21:48

2 Answers 2

Reset to default
2
+100

Your items-array you show as example data is unsuitable for the template:

the items-array contains two objects, one with a single property name, the other with a single property link. But based on the template it looks as if name and link should be part of the same object, e.g.:

items: [
    { name: 'Foo1', 'link': 'Bar1' },
    { name: 'Foo2', 'link': 'Bar2' }
]

With the original array passed as by your example, there will likely be an error shown in the browser's console due to item.link not being defined for the first object, and thus probably stopping the rendering process of Vue.

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

3 Comments

How can I pass items to the component (from the another component) ?
What other component? Do you use single-vue-files (files ending in .vue)? (ah, according to the edit you do, which is good) how do you use the template? Often, you can pass data as so called props (properties) (which you already defined in your rue-file), e.g. like <my-navbar :items="items" />. But it really depends on your exact setup, which we don't know unless you provide more details.
I tried this but it doesn't work, ' <Nav :items=[ { name: 'Foo1', 'link': 'Bar1' }, { name: 'Foo2', 'link': 'Bar2' } ] /> '
1

The main problem in your example is that you named your component Nav, but HTML5 already has this element which will cause a collision between your component and HTML's element, just rename into something else.

After you change the name make sure that the array that you pass to that component looks like this - [{name: 'a', link: 'http://a.com'}, {name: 'b', link: 'http://b.com'}].

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.