Property "open" was accessed during render but is not defined on instance

user_14016120 0
Viewed 732

Inside my Laravel-Vue app this

Works:

@include('header')

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

@include('footer')

But putting @includes inside #app, throws warning "Property "open" was accessed during render but is not defined on instance."

Not working:

<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>
alpine.js vuejs3 laravel vue.js
1 Answers

The reason was I put Alpine.js inisde Vue, so @click and :class weren't working.

So I replaced them with x-bind:class and x-on:click and everything worked as expected.

user_140161200
Related