NikxDa NikxDa - 7 days ago 6
Javascript Question

Navigation Bar with Vue.js

I am currently working on a project in Vue.js and this is my first time working with a full environment using Webpack, Vue.js, Babel, and so on.

In previous projects, having a navigation bar was pretty straight-forward. Just add the HTML structure, hard-code the links and that's it, the navigation bar is done. Now with Vue.js, I think that this would destroy the sense of components. I have added a

<nav-bar>
-component and several
<nav-bar-item>
-components. This works well, the navigation bar appears and contains the items.

Now onto the actual problem: Where do I now put my links and texts for those items? My guess was to put them inside the
<nav-bar>
-component, but the text is rendered by the
<nav-bar-item>
-component, so I'd have to hand the data over. Putting them directly inside the
<nav-bar-item>
-component will not work because the item does "not know" what it is in the overall site.

What would be the best practice here? Hand the data over? Create a global configuration?

Thanks!

Answer

The thing you could do is define initial data in parent component, that would store info about nav bar items.Then you can iterate them and send data for each item using the props https://vuejs.org/v2/guide/components.html#Props

Comments