Just trying my hand at Vue.js, so bear with me if this seems too simple.
I've got the code for Home.vue here:
<template>
<div class="home">
<div>
<b-table striped hover :items="borrowingHistroy"></b-table>
</div>
</div>
</template>
<script>
import userData from '@/data/user_data';
export default {
name: 'Home',
data() {
return {
userId: 0,
};
},
computed: {
borrowingHistroy: () => userData[this.userId].borrowingHistory,
},
};
</script>
The code isn't rendering and throwing this error/warning:
[Vue warn]: Error in render: "TypeError: Cannot read property 'userId' of undefined"Switched the borrowingHistroy as shown below to make it work:
borrowingHistroy: () => userData[0].borrowingHistory,Does that mean this is not defined here?
How can I access the userId defined in "data" then?
****** edited ******
This is some other parts of my code:
main.js:
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/images/HPL.png">
<div id="nav">
<router-link to="/">Home</router-link>
</div>
<router-view />
</div>
</template>
router/index.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
store/index.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
},
});