Vue绑定点击事件切换类报错：属性未在实例上定义，求解决方案

报错Property 'XXX' was accessed during render but is not defined on instance.的核心原因：

• Sidebar.vue模板中使用的isexpanded未在组件实例中定义，你将状态放在了独立的Sidebar.js文件，但组件没有引入关联这个状态
• 即使Dashboard调用了SidebarJs里的ToggleMenu修改状态，Sidebar.vue也无法感知到变化，因为两者的状态没有绑定到同一组件上下文

采用Vue推荐的**组合式函数（Composables）**拆分逻辑，同时通过父子组件传值实现状态同步，具体步骤如下：

1. 重构Sidebar.js为组合式函数 #

将状态和方法封装成可复用的组合式函数，确保状态能被组件正确关联：

import { ref } from 'vue'

export function useSidebar() {
  // 侧边栏展开状态
  const isexpanded = ref(false)

  // 切换菜单方法
  const ToggleMenu = () => {
    isexpanded.value = !isexpanded.value
    console.log('test')
  }

  // 其他自定义方法
  const foo = () => {
    const activeClass = ref('active')
    const errorClass = ref('text-danger')
    console.log('foo')
  }

  const bar = () => console.log('bar')

  // 暴露状态和方法供组件使用
  return {
    isexpanded,
    ToggleMenu,
    foo,
    bar
  }
}

2. 修改Sidebar.vue组件 #

通过props接收父组件传递的状态，绑定到模板的class上：

<script setup>
// 定义props接收展开状态
defineProps({
  isexpanded: {
    type: Boolean,
    default: false
  }
})
</script>

<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>
<!-- 其他侧边栏代码 -->
</template>

3. 修改Dashboard.vue组件 #

引入组合式函数，获取状态和方法，将状态传递给Sidebar组件，并绑定点击事件：

<script setup>
import { Head } from '@inertiajs/vue3';
import SideBar from '../Components/Sidebar.vue';
import { useSidebar } from '@/../../resources/js/Functions/Sidebar';

// 获取侧边栏的状态和方法
const { isexpanded, ToggleMenu } = useSidebar()
</script>

<template>
<Head title="Dashboard" />
<!-- 将状态通过props传给Sidebar -->
<SideBar :isexpanded="isexpanded" />

<!-- 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">
      <!-- 绑定ToggleMenu方法 -->
      <button type="button" class="text-lg text-gray-600 sidebar-toggle" @click="ToggleMenu">
          <i class="ri-menu-line"></i>
      </button>
  </div>

  <!-- 其他仪表盘代码 -->
</main>
</template>

• 组合式函数useSidebar创建的状态会和引入它的组件（Dashboard）上下文绑定，确保状态变化能被Vue响应式追踪
• 通过props将父组件的状态传递给Sidebar子组件，实现父子组件状态同步
• 点击按钮调用的ToggleMenu直接修改绑定的响应式状态，触发Sidebar组件的class更新

内容的提问来源于stack exchange，提问作者Raymart Calinao