Vue.js 将v-model与Vuex存储一起使用时，Vuetify导航抽屉错误

我试图使用

Vuex

存储来保存变量，该变量将控制

v-navigation-drawer

组件是否打开/可见。原因是我想知道nav抽屉是否从其他组件打开，并有条件地将类应用于某些元素。我的

App.vue

中的一些代码：

<v-navigation-drawer app v-model="this.$store.state.showNavDrawer" ...
...
<v-app-bar-nav-icon @click="toggleNavDrawer"></v-app-bar-nav-icon>
...
methods: {
    toggleNavDrawer() {
        this.$store.commit('toggleNavDrawer');
    },
},

在初始页面加载时，屏幕大小受到尊重，导航抽屉显示/隐藏其应显示的方式，但控制台上显示以下错误：

[Vue warn]: Error in v-on handler: "TypeError: this is null"

found in

---> <VNavigationDrawer>
       <VApp>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
TypeError: this is null
    callback App.vue:17
    VueJS 4
    isActive VNavigationDrawer.ts:248
    VueJS 7
    confirmTransition vue-router.esm.js:2342
    step vue-router.esm.js:1944
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2335
    step vue-router.esm.js:1944
    step vue-router.esm.js:1948
    iterator vue-router.esm.js:2322
    resolveAsyncComponents vue-router.esm.js:2105
    iterator vue-router.esm.js:2300
    step vue-router.esm.js:1947
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2330
    transitionTo vue-router.esm.js:2203
    init vue-router.esm.js:2923
    beforeCreate vue-router.esm.js:1271
    VueJS 4
    <anonymous> main.js:42
    js app.js:1113
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1234
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928

[Vue warn]：v-on处理程序中的错误：“TypeError:这是null”
发现于
---> 
在src/App.vue
vue.runtime.esm.js:619
TypeError:这是空的
回调应用程序。vue:17
VueJS 4
isActive VNavigationDrawer.ts:248
VueJS 7
ConfirmVue路由器.esm.js:2342
step vue router.esm.js:1944
step vue router.esm.js:1951
runQueue vue router.esm.js:1955
ConfirmVue路由器.esm.js:2335
step vue router.esm.js:1944
step vue router.esm.js:1948
迭代器vue router.esm.js:2322
resolveAsyncComponents vue router.esm.js:2105
迭代器vue router.esm.js:2300
step vue router.esm.js:1947
step vue router.esm.js:1951
runQueue vue router.esm.js:1955
ConfirmVue路由器.esm.js:2330
转换到vue router.esm.js:2203
init vue router.esm.js:2923
在创建vue路由器之前。esm.js:1271
VueJS 4
main.js:42
js app.js:1113
__webpack_require_uuu应用程序.js:849
fn app.js:151
1 app.js:1234
__webpack_require_uuu应用程序.js:849
checkDeferredModules app.js:46
app.js:925
app.js:928

导航抽屉控件的第一次单击从未执行任何操作。导航抽屉没有移动，控制台也没有错误。之后的每次单击都会正常工作并显示/隐藏抽屉，但控制台中的每次单击都会出错：

[Vue warn]: Error in v-on handler: "TypeError: this is null"

found in

---> <VNavigationDrawer>
       <VApp>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
TypeError: this is null
    callback App.vue:17
    VueJS 4
    isActive VNavigationDrawer.ts:248
    VueJS 10
    toggleNavDrawer main.js:32
    wrappedMutationHandler vuex.esm.js:844
    commitIterator vuex.esm.js:466
    commit vuex.esm.js:465
    _withCommit vuex.esm.js:624
    commit vuex.esm.js:464
    boundCommit vuex.esm.js:409
    toggleNavDrawer App.vue:157
    VueJS 4
    click VBtn.ts:158
    VueJS 33

[Vue warn]：v-on处理程序中的错误：“TypeError:这是null”
发现于
---> 
在src/App.vue
vue.runtime.esm.js:619
TypeError:这是空的
回调应用程序。vue:17
VueJS 4
isActive VNavigationDrawer.ts:248
VueJS 10
togglenavdrawermain.js:32
wrappedMutationHandler vuex.esm.js:844
委托人vuex.esm.js:466
提交vuex.esm.js:465
_使用commit vuex.esm.js:624
提交vuex.esm.js:464
boundCommit vuex.esm.js:409
toggleNavDrawer应用程序。vue:157
VueJS 4
单击VBtn.ts:158
VueJS 33

您无法

v-model

连接到vuex

您需要使用

：value=“this.$store.state.shownavrawer”

道具。然后用

@click

事件按您的方式修改它，您应该会没事的

注：如果我是你，我会直接给你的初始状态一个布尔值，我看不出一开始就把它设为null有什么意义

[Vue warn]: Error in v-on handler: "TypeError: this is null"

found in

---> <VNavigationDrawer>
       <VApp>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
TypeError: this is null
    callback App.vue:17
    VueJS 4
    isActive VNavigationDrawer.ts:248
    VueJS 10
    toggleNavDrawer main.js:32
    wrappedMutationHandler vuex.esm.js:844
    commitIterator vuex.esm.js:466
    commit vuex.esm.js:465
    _withCommit vuex.esm.js:624
    commit vuex.esm.js:464
    boundCommit vuex.esm.js:409
    toggleNavDrawer App.vue:157
    VueJS 4
    click VBtn.ts:158
    VueJS 33