New Jan 4, 2025

single pages doesn't work when i moved them to app component

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View single pages doesn't work when i moved them to app component on stackoverflow.com

since i moved my navlist to app.component , pages stopped working and nothing happens when i click on them

im trying to learn vue step by step and this happend when i moved ul from body to template

please check app component navbar to template

<body id="body">
<navbarr
:pages="pages"
:active-page="activePage"
></navbarr>

<page-viewer
:page="pages[activePage]"></page-viewer>


app.component('navbarr',{
computed:{
navbarClasses(){
return{
'bg-light':!this.darkNav,
'bg-dark':this.darkNav
}
}
},
props:['pages','activePage'],
template:         &lt;ul class=&quot;nav&quot; :class=&quot;navbarClasses&quot;&gt;             &lt;form class=&quot;d-flex&quot;&gt;             &lt;div class=&quot;form-check form-switch&quot;&gt;                 &lt;input class=&quot;form-check-input&quot; @click=&quot;darkNav=!darkNav&quot; type=&quot;checkbox&quot; role=&quot;switch&quot; id=&quot;flexSwitchCheckDefault&quot;                  &gt;             &lt;/div&gt;             &lt;/form&gt;             &lt;li v-for=&quot;(page,index) in pages&quot;class=&quot;nav-item&quot; :key=&quot;index&quot;&gt;               &lt;a class=&quot;nav-link&quot; :href=&quot;page.link.url&quot;               :class=&quot;{active:activePage==index}&quot;               :title=&quot;\This goes to ${page.link.text} page`"
@click.prevent="activePage=index"
>{{page.link.text}}</a>
</li>
</ul>


`,
data(){
return{
darkNav:false,
}
}
})

Scroll to top