Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

  2. 0

    It looks like you should export and import isexpanded too from your Sidebar.js file

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search