after compiling - ReferenceError: collapsed is not defined
anubisg1 opened this issue · comments
when running the app locally via "npm run dev" everything works as expected.
"npm run build" also shows no problem.
But once the compiled app is served, the following error appears:
index.86033c86.js:1 ReferenceError: collapsed is not defined
at G.onUpdate:collapsed.n.<computed>.n.<computed> (index.86033c86.js:1:80559)
at wt (index.86033c86.js:1:13159)
at We (index.86033c86.js:1:13237)
at We (index.86033c86.js:1:13337)
at Bl (index.86033c86.js:1:15268)
at Proxy.u (index.86033c86.js:1:76724)
at Kc.n.hideToggle.me.onClick.t.<computed>.t.<computed> (index.86033c86.js:1:77822)
at wt (index.86033c86.js:1:13159)
at We (index.86033c86.js:1:13237)
at HTMLButtonElement.n (index.86033c86.js:1:54127)
the menu resizes but the main page doesn't move to follow the collapsed menu.
I'have been stuck at this problem for days...
this is App.vue, the menu is loaded here:
<script setup>
import NavBar from "@/components/NavBar.vue";
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
import { h, markRaw } from 'vue'
</script>
<template>
<sidebar-menu
v-model:collapsed="collapsed"
:menu="menu"
:theme="selectedTheme"
:show-one-child="true"
@update:collapsed="onToggleCollapse"
@item-click="onItemClick"
/>
<div v-if="isOnMobile && !collapsed" class="sidebar-overlay" @click="collapsed = true" />
<div id="main" :class="[{'collapsed' : collapsed}, {'onmobile' : isOnMobile}]">
<NavBar />
<div class="main">
<div class="container">
<router-view />
</div>
</div>
</div>
</template>
<script>
const separator = {
template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">'
}
const pushToBottom = markRaw({
render: () => h('div'),
mounted () {
const itemEl = this.$el.parentElement
itemEl.style.marginTop = 'auto'
}
})
export default {
components: {
SidebarMenu
},
name: 'App',
data () {
return {
menu: [
/* {
icon: {
element: "img",
attributes: {
src: "/src/assets/company-logo-small-wb.png",
},
},
},
*/
{
href: '/',
title: 'Home',
icon: 'fa fa-home'
},
{
header: 'Enhanced Visibility',
hiddenOnCollapse: true
},
{
href: '/cyber-security',
title: 'Cyber Security',
icon: 'fa fa-shield-quartered',
badge: {
text: 'new',
class: 'vsm--badge_default'
},
child: [
{
href: '/cyber-security/documentation',
title: 'Documentation',
icon: 'fa fa-file-alt'
},
{
href: '/cyber-security/self-service',
title: 'Self Service',
icon: 'fa fa-block-brick-fire',
//disabled: true
}
]
},
{
href: '/analytics',
title: 'Analytics',
icon: 'fa fa-fingerprint',
//disabled: true
child: [
{
href: '/analytics/dashboards',
title: 'Dashboards',
icon: 'fa fa-chart-line'
},
{
href: '/analytics/endpoint-search',
title: 'Endpoint Search',
icon: 'fa fa-magnifying-glass-location',
//disabled: true
}
]
},
{
header: 'Workflows and Automation',
hiddenOnCollapse: true
},
{
href: '/asset-management',
title: 'Asset Management',
icon: 'fa fa-users-gear',
child: [
{
href: '/asset-management/inventory',
title: 'Hardware Inventory',
icon: 'fa fa-cart-flatbed-boxes'
},
{
href: '/asset-management/server-boarding',
title: 'Server Boarding',
icon: 'fa fa-server'
},
{
href: '/asset-management/equipment-boarding',
title: 'Equipment Boarding',
icon: 'fa fa-router'
}
]
},
{
href: '/network-automation',
title: 'Network Automation',
icon: 'fa fa-gears',
child: [
{
href: '/network-automation/vxlan',
title: 'VXLAN-EVPN Fabric',
icon: 'fa fa-network-wired'
},
{
href: '/network-automation/aci',
title: 'Cisco ACI',
icon: 'fa fa-network-wired'
},
{
href: '/network-automation/sdwan',
title: 'SD-WAN',
icon: 'fa fa-chart-network'
},
{
href: '/network-automation/meraki',
title: 'Cisco Meraki',
icon: 'fa fa-wifi'
}
]
},
/* {
component: markRaw(separator)
},
*/
{
header: 'Documentation',
hiddenOnCollapse: true
},
{
href: '/ipam',
title: 'IPAM',
icon: 'fa fa-location-dot',
child: [
{
href: '/ipam/vlan',
title: 'Vlan'
},
{
href: '/ipam/vrf',
title: 'VRF'
},
{
href: '/ipam/prefix',
title: 'Prefixes'
}
]
},
{
href: '/reports',
title: 'Reports',
icon: 'fa fa-file-chart-column',
disabled: true
},
{
component: pushToBottom
},
{
href: '/settings',
title: 'Settings',
icon: 'fa fa-gear'
}
/* {
header: 'Example',
hiddenOnCollapse: true
},
*/
],
collapsed: false,
themes: [
{
name: 'Default theme',
input: ''
},
{
name: 'White theme',
input: 'white-theme'
}
],
selectedTheme: '',
isOnMobile: false
}
},
mounted () {
this.onResize()
window.addEventListener('resize', this.onResize)
},
methods: {
onToggleCollapse (collapsed) {
console.log('onToggleCollapse')
},
onItemClick (event, item) {
console.log('onItemClick')
},
onResize () {
if (window.innerWidth <= 767) {
this.isOnMobile = true
this.collapsed = true
} else {
this.isOnMobile = false
this.collapsed = false
}
}
}
}
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
body,
html {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
background-color: #f2f4f7;
color: #262626;
}
#main {
padding-left: 290px;
transition: 0.3s ease;
}
#main.collapsed {
padding-left: 65px;
}
#main.onmobile {
padding-left: 65px;
}
.sidebar-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
opacity: 0.5;
z-index: 900;
}
.main {
padding: 50px;
}
.container {
width: "100%";
}
.v-sidebar-menu .vsm--menu {
display: flex;
flex-direction: column;
height: 100%;
}
</style>
I found the issue, it's related to "collapse:false", I'll write more details once I land
The issue is caused by using both normal <script> and <script setup>
move imports to normal script
that helped, and move navbar to the export.. thanks, what a dumb mistake :(