abela
1 month ago
248
2
Vue

[Alpine.js] Property or method "sidebarIsOpen" is not defined on the instance but referenced during render.

Posted 1 month ago by abela

js/Layouts/Docs.vue

<template>
  <div class="flex h-screen bg-secondary overflow-hidden" x-data="{sidebarIsOpen : true}">
    <sidebar />
    <div class="flex-1 flex flex-col overflow-hidden">
      <navbar />
      <main class="flex-1 overflow-x-hidden px-4">
        <div class="mx-6 pb-4 overflow-y-auto">
          <slot />
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Sidebar from "../components/DocsSidebar";
import Navbar from "../components/DocsNavbar";
export default {
  props: {
    title: String,
  },
  components: {
    Sidebar,
    Navbar,
  },
  watch: {
    title: {
      immediate: true,
      handler(title) {
        document.title = title;
      },
    },
  },
};
</script>

js/components/DocsSidebar.vue

<template>
  <div
    class="fixed rounded-r-lg z-30 inset-y-0 left-0 transition duration-300 transform bg-white overflow-hidden lg:translate-x-0 lg:static lg:inset-0"
    style="width:280px"
    x-show="sidebarIsOpen"
    @click.away="sidebarIsOpen = false"
  >
    ...
  </div>
</template>

js/components/DocsNavbar.vue

<template>
  <nav class="my-5 mx-6 flex justify-between items-center py-4 px-6 bg-white rounded-md">
    <div class="flex items-center">
      <button
        class="text-normal mr-8 focus:outline-none hover:bg-secondary px-2 py-1 rounded-md"
        @click="sidebarIsOpen = !sidebarIsOpen"
      >
        <i class="la la-bars"></i>
      </button>
      <a href="#" class="text-normal mr-5">Home</a>
      <a href="#" class="text-normal text-danger mr-5">Docs</a>
      <a href="#" class="text-normal mr-5">Bootstrap Version</a>
    </div>
    <a href="#" class="bg-danger text-white py-2 px-5 rounded-md text-sm">
      <span>
        <i class="la la-download"></i>
      </span>
      <span class="hidden sm:inline">Download</span>
    </a>
  </nav>
</template>

Can anyone help me? :(

Please sign in or create an account to participate in this conversation.