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

Question

在我的Laravel Vue应用程序中，这个

作品：

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

但将@包含在#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>

Answer 1

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

所以我用x-bind:class和x-on:click替换了它们，一切都如预期的那样。