After attempting to navigate to a different page by clicking a button in vuetify, I encountered an issue. The console displayed the following error message:
"TypeError: Cannot read property '$router' of null"
Below is the code snippet:
ProductDetailsCard.vue
<v-btn @click="this.$router.push({path: '/newpage'})">Next Page</v-btn>
To view the complete ProductDetailsCard.vue page, visit this link:
https://wetransfer.com/downloads/775193b11b70a8cd03372db08ee5a56a20200522072851/4d93e3router > index.js
import Vue from 'vue';
import Router from 'vue-router';
import NewPage from '../components/NewPage.vue';
Vue.use(Router)
export default new Router({
base: process.eventNames.BASE_URL,
routes: [
{
path: '/newpage',
name: 'newpage',
component: NewPage
}
]
})
When attempting to change the code as follows:
ProductDetailsCard.vue
<v-btn @click="NewPage">Next Page</v-btn>
.....
NewPage ( ) {
this.$router.push({ path: '/newpage'});
}
A new error appears in the console:
"TypeError: Cannot read property 'push' of undefined"
If anyone has any solutions or suggestions, please feel free to help. Thank you!