V 模型给出：v-on 处理程序中的错误：使用计算函数"TypeError: right-hand side of 'in' should be an object, got null"

Question

我有一个Vuetify组件，它基于vuex值进行切换。

组件：

<v-navigation-drawer
app
floating
color="#F5F7F8"
:mini-variant.sync="this.toggleMini"
width="240"
v-model="this.mobileToggle"
:permanent="$vuetify.breakpoint.mdOnly"
:temporary="$vuetify.breakpoint.smAndDown"
v-click-outside="this.overlayToggle"
v-if="this.setUser"
>
</v-navigation-drawer>

计算：

mobileToggle() {
if (this.$store.getters.g_mobileDrawer === !null) {
return this.$store.getters.g_mobileDrawer;
}
return false;
},

存储

export default new Vuex.Store({
state: {
miniVariant: false,
mobileDrawer: true,
user: false,
},
mutations: {
miniToggle(state) {
state.miniVariant = !state.miniVariant;
},
mobileToggle(state) {
state.mobileDrawer = !state.mobileDrawer;
},
userState(state) {
state.user = !state.user;
},
},
getters: {
g_miniVariant(state) {
return state.miniVariant;
},
g_mobileDrawer(state) {
return state.mobileDrawer;
},
g_user(state) {
return state.user;
},
},
});

解决方法，因为如果我点击导航覆盖，状态不会更新。(这也被称为创建(

overlayToggle() {
// workaround for close on overlay click on mobile, otherwise state isn't updated.
if (this.$vuetify.breakpoint.smAndDown && this.mobileToggle === true) {
this.$store.commit('mobileToggle');
}
},

它在移动设备上工作，但如果我调整屏幕大小，或者使用我得到的开发工具：v-model="this.mobileToggle"上的Error in v-on handler: "TypeError: right-hand side of 'in' should be an object, got null"。

据我所知，这里面没有"in"。mobileToggle也不是null，它是false。

Answer 1

您的v模型是以下内容的转换：

:value="this.mobileToggle"
@input="this.mobileToggle = $event"

您的计算机在此没有设置器。

只需这样修改：

mobileToggle: {
get(){
if (this.$store.getters.g_mobileDrawer === !null) {
return this.$store.getters.g_mobileDrawer;
}
return false;
},
set(newMobileToggle){
// your action to mutate g_mobileDrawer
}      
},

如果你不想让导航抽屉改变g_mobileDrawer，那么用：value 替换v-model