在渲染期间访问了属性“open”，但未在实例上定义

Posted 2023-03-16

【中文标题】在渲染期间访问了属性“open”，但未在实例上定义

【英文标题】：Property "open" was accessed during render but is not defined on instance

【发布时间】：2022-01-12 13:28:05

【问题描述】：

在我的 Laravel-Vue 应用程序中

作品：

@include('header')

<div id="app">
    @yield('content')
</div>

@include('footer')

但是将 @includes 放在 #app 中，会引发警告“在渲染期间访问了属性“打开”但未在实例上定义。”

不工作：

<div id="app">
    @include('header')
    @yield('content')
    @include('footer')
</div>

header.blade.php

<header x-data=" open: false ">
    <button @click="open = !open"> open </button>
    <nav :class="'hidden' : !open" x-cloak></nav>
</header>

【参考方案1】：

原因是我将 Alpine.js 放入 Vue 中，所以 @click 和 :class 不起作用。

所以我用x-bind:class 和x-on:click 替换它们，一切都按预期工作。