Currently, I am working on a tab system using VueJS. Each tab has its own set of properties stored in a list of objects. My goal now is to retrieve these properties within my Vue component.
Below is the Vue code inside my component:
<div>
<large-card v-bind:path="tabs[currentTab].path"></large-card>
</div>
And here is a snippet of the Vue component (unnecessary code omitted):
export default {
data () {
return ({
tabs: [
{
name: 'Nodes',
path: '/nodes/'
},
{
name: 'Sensors',
path: '/sensors/'
}
],
currentTab: 0
});
}
}
It is clear that I am trying to pass the path value of the current tab to my component. In this case, it should receive the value '/nodes/', but it seems to be not functioning as expected. I remember being able to achieve this in Angular by exposing the object as "this" into the scope of an HTML tab, but I can't recall the directive's name...
Thank you for taking the time to read this. Have a wonderful day!