Vue.js：如何将登录模式放在下拉菜单中？

Question

我有以下下拉菜单：

<template>
    <v-menu close-on-click transition="slide-y-transition">
        <template v-slot:activator="{ on, attrs }"> 
            <v-btn  color="primary" v-bind="attrs" v-on="on">
                Menu
            </v-btn>
        </template>
        <v-list>
            <v-list-item v-for="(item, index) in menuItemsMisc" :key="index" v-model="item.model">
                <v-list-item-title>
                    <v-btn block color="white" @click="item.fn">{{ item.title }}</v-btn>
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
    <!-- Modal code here -->
</template>

<script>
export default {
    name: 'MenuBar',
    data: () => ({
        loginModal: false,
        purchaseModal: false,
        menuItemsMisc: [
            {   title: 'Login',
                model: 'loginModal',
                fn: () => { this.loginModal = true}
            },
            {   title: 'Purchase',
                model: 'purchaseModal', 
                fn: () => { this.purchaseModal = true }
            },
        ]
    }),
}
</script>

我试图在下拉菜单中单击登录按钮时显示此登录模式。

<v-dialog v-model="loginModal" persistent max-width="500px">
    <v-card class="elevation-12">
        <v-toolbar color="primary" dark flat>
            <v-toolbar-title>Login form</v-toolbar-title>
                <v-spacer></v-spacer>
        </v-toolbar>
        <v-card-text>
            <v-form>
                <v-text-field name="login" prepend-icon="mdi-account" type="text"></v-text-field>
                <v-text-field id="password" name="password" prepend-icon="mdi-lock" type="password">
                </v-text-field>
            </v-form>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary">Login</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

但是每当我单击登录或购买按钮时，我都会收到一条错误消息：

TypeError: Cannot set property 'loginModal' of undefined

这里有什么问题？

Answer 1

来自v-model上的 Vue 文档：

您可以使用 v-model 指令在表单输入、文本区域和选择元素上创建双向数据绑定。 它会根据输入类型自动选择正确的方式来更新元素。

<v-dialog>组件上的v-model属性期望它是某种类型的输入。

您应该能够简单地将其更改为v-if ：

<v-dialog v-if="loginModal" persistent max-width="500px">

这将导致在单击按钮时显示<v-dialog>组件。

编辑：还请确保您在 Vue 实例上的data属性被声明为类样式函数。 如果您使用 lambda 函数，您将在引用this.loginModal时失去this范围：

export default {
  ...
  data() {
    return {
      ...
    }

  }
}