typescript - "TypeError: Kan ikke lese egenskapen '$router' av null" i vuetify

Jeg prøver å navigere til en annen side etter å ha klikket på en knapp i Vuetify, men klarer det ikke. I konsollen vises denne feilen:

"TypeError: Cannot read property '$router' of null"

Dette er koden min:

ProductDetailsCard.vue

<v-btn @click="this.$router.push({path: '/newpage'})">Next Page</v-btn>

Dette er hele min ProductDetailsCard.vue side https://wetransfer.com/downloads/775193b11b70a8cd03372db08ee5a56a20200522072851/4d93e3

router > 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
        } 
    ]
})

Hvis jeg endrer koden slik:

ProductDetailsCard.vue

<v-btn @click="NewPage">Next Page</v-btn>
.....
NewPage ( ) {
        this.$router.push({ path: '/newpage'});
}

Da viser den denne feilen i konsollen:

"TypeError: Cannot read property 'push' of undefined"

Kan noen hjelpe?

Svar #1

Bare skriv $router.push, this er for referanse til Vue-komponenten inne i scriptet.

<v-btn @click="$router.push({path: '/newpage'})">Next Page</v-btn>

Relaterte artikler