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

【问题标题】：Property "open" was accessed during render but is not defined on instance在渲染期间访问了属性“open”，但未在实例上定义
【发布时间】：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>

【问题讨论】：

标签： laravel vue.js vuejs3 alpine.js

【解决方案1】：

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

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

【讨论】：