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:
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'}
]
}
}
}
In the answers of the previous question I have done everything suggested:
making data a function
using proper syntax for link
{{ menuItems.text }}
fixing the typo in menu items.
However, my
is totally empty after all those suggestions. Why?
My App.vue looks like this:
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 empty?
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
