Nuxt 3 说“变量”未定义，而我已经在数据中定义了它，我该如何解决这个问题？

Question

所以我有一个 Nuxt 3 项目，但我的默认布局文件有问题。

在我的脚本标签中，我定义了以下内容

export default {
        data() {
            return {
                variables: {
                    productsHover: false,
                    aboutUsHover: false,
                    applicationsHover: false,
                    customSolutionsHover: false,
                
                    mouseOverMenu: false,
                    subProductsMediaHover: false,
                    subProductsSerumReplacementHover: false,
                    subProductsWfiHover: false,
                    subApplicationsBioproduction: false,
                    subCustomSolutionsRuotogmp: false,
                    subCustomSolutionsSterileLiquids: false,
                    subCustomSolutionsOem: false,
                    subAboutUsQuality: false,
                    //width: window.innerWidth,

                    appMenu: false
                },
            }
        },

与此数据交互的第一个元素（也是错误出现的点）如下所示：

<div class="h-full transform transition-all duration-300 z-20 w-full flex  absolute" v-show="this.variables.appMenu == true && widthStore.width < 688">

我知道这一点，因为当我将变量名称更改为其他名称（例如 abc）时，错误消息显示与 abc 而不是变量相同。

我收到的错误：

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'variables')                                                                                                                                                                                                                                     12:39:06
  at _sfc_ssrRender (C:\Users\wandres\Desktop\Nuxt\nuxt-test\layouts\default.vue:409:48)
  at renderComponentSubTree (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
  at renderComponentVNode (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
  at renderVNode (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:743:14)
  at renderComponentSubTree (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:698:7)
  at C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:629:25
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async unrollBuffer$1 (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:870:16)
  at async unrollBuffer$1 (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:875:16)
  at async unrollBuffer$1 (C:\Users\wandres\Desktop\Nuxt\nuxt-test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:875:16)

当我加载页面时，错误总是记录在控制台中，但在页面本身上，它在第一次加载时显示错误，如果我再次加载它，我不会发送到错误侧，而是发送到一切正常的右侧，错误仍然记录在终端中。 每次 F5 后的页面，我都有机会登陆错误页面，该页面显示与控制台日志完全相同的错误，或者只是位于一切正常的页面上。

有人理解它为什么出现和/或如何修复它吗？

Answer 1

模板中不需要使用

this

，尝试将

this.variables.appMenu

替换为

variables.appMenu