Search code examples
javascriptlaravelvuejs3

Trying to bind in class on a click event but gets an error of "Property "XXX" was accessed during render but is not defined on instance. "

Hello everyone I'm trying to bind a click event on a button to toggle a class on vue but I'm kinda stuck on the following code, can you help me with some tips and examples

my structure

dashboard.vue
|_Sidebar.vue  Sidebar Component 
|_Mainpage     
|_SidebarJs // this is where all my function should be called by sidebar component

My Dashboard code

<template>
<Head title="Dashboard" />
<SideBar />
  <!-- start: Main -->
  <main class="w-full md:w-[calc(100%-256px)] md:ml-64 bg-gray-50 min-h-screen transition-all main">
    <div class="py-2 px-6 bg-white flex items-center shadow-md shadow-black/5 sticky top-0 left-0 z-30">
        <button type="button" class="text-lg text-gray-600 sidebar-toggle" @click="SidebarJs.ToggleMenu">
            <i class="ri-menu-line" ></i>
        </button>
    </div>

    <!-- Some very long line of codes for other sections of dashboard  -->
  </main>

Sidebar.vue code

<template>
<div
    :class="[`${isexpanded?'active':''}`]"
    class="fixed left-0 top-0 w-64 h-full bg-gray-900 p-4 z-50 sidebar-menu transition-transform">   
</div>
 <!-- Some very long line of codes for other sections of Sidebar  -->

Sidebar.js

   const isexpanded = ref(false)
    var FunctionScripts = {
    ToggleMenu () {
            isexpanded.value = !isexpanded.value
            console.log('test')       
    },
    foo () {
        const activeClass = ref('active')
        const errorClass = ref('text-danger')
        console.log('foo')
    },
    bar () { console.log('bar') }
  }
  export default FunctionScripts

import scripts

import { Head } from '@inertiajs/vue3';
import SideBar from '../Components/Sidebar.vue';
import SidebarJs from '@/../../resources/js/Functions/Sidebar';
import {ref} from 'vue';

my references for the codes i learn are from youtube and docs https://vuejs.org/guide/essentials/class-and-style.html#class-and-style-bindings

my older code works only if all of the codes are not split up or inside a single vue but i want it to be organize so thats why i cant use these codes anymore

old code

<script setup>
import {ref} from 'vue';
const isexpanded = ref(false)
const ToggleMenu = ()=> {
    isexpanded.value = !isexpanded.value
}
</script>
Solution

  • Just found out the answer for myself with the help from the comments by adding props to access the child component to parent

    Dashboard.vue

    const isexpanded = ref(false)
const ToggleMenu = ()=> {
SidebarJs.ToggleMenu(isexpanded)
console.log(isexpanded.value)
return isexpanded
}

<template> 
  <SideBar :isexpanded="isexpanded"/>
</template>

    Sidebar.js

    defineProps({
  title: String,
  isexpanded: String
})

    SidebarJs

    var FunctionScripts = {

    ToggleMenu (isexpanded) {

        //console.log(data)
        isexpanded.value = !isexpanded.value

        return isexpanded

    },
    foo (data) {


        return data
    },
    bar () { console.log('bar') }
  }
  export default FunctionScripts