I asked a question yesterday and none of the answers are working so I decided to start a fresh one with more details.
You can view the question here: VueJS - using mustache template strings inside href attribute
Basically I have a vue app split out into components. That project structure looks like below:
Inside my "Nav.vue" component, I have a navigation that I want to loop through inside a data block.
The entire code of the component looks like this:
<template>
<div>
<header class="global-header">
<div class="global-header__container">
<h1>NAV IS HERE</h1>
<nav class="nav-main" role="navigation" aria-label="Site">
<ul>
<li v-for="menuItem in menuItems" class="nav-item">
<a
:href="menuItem.url"
class="nav-link"
>{{ menuItems.text }}</a
>
</li>
</ul>
</nav>
</div>
</header>
</div>
</template>
<script>
export default {
name: 'Nav',
data: function() {
return {
menuItems: [
{text: 'Item 1', url: '/item-1'},
{text: 'Item 2', url: '/item-2'},
{text: 'Item 3', url: '/item-3'},
{text: 'Item 4', url: '/item-4'}
]
}
}
}
</script>
In the answers of the previous question I have done everything suggested:
- making data a function
- using proper syntax for link
<a :href="menuItem.url" class="nav-link">{{ menuItems.text }}</a> - fixing the typo in menu items.
However, my <ul> is totally empty after all those suggestions. Why?
My App.vue looks like this:
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
</style>
main.js looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
router.js looks like this:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
With all that shared - do I need to put my data somewhere else? Why is my <ul> empty?
