CODEWITHSUNDEEP
javascriptvue.js
Xobtah
Xobtah

Reputation: 545

Using variable inside an object in HTML

I'm using VueJS to create a tab system, every tab having it's own set of properties, so I created a list of objects containing those properties, and now I want to get these properties in my vue.

This is the vue inside my component:

<div>
    <large-card v-bind:path="tabs[currentTab].path"></large-card>
</div>

And this is the Js Vue component (I got rid of the irrelevant code):

export default {
    data () {
        return ({
            tabs: [
                {
                    name: 'Nodes',
                    path: '/nodes/'
                },
                {
                    name: 'Sensors',
                    path: '/sensors/'
                }
            ],
            currentTab: 0
        });
    }
}

As you can see, I want to pass the path value of the current tab to my component, so in this example it should get the value '/nodes/', but it doesn't work this way. I knew a way to do it in Angular, exposing the object as "this" into the scope of a HTML tab, but I don't remember the directive's name...

Thank you for your attention, have a nice day!

Upvotes: 1

Views: 56

Answers (1)

skribe
skribe

Reputation: 3615

You can use a computed property for this. 

computed: {
    path(){
        return this.tabs[this.currentTab].path;
    }
 },

Then bind the path to a path prop and pass it to your other child

<large-card v-bind:path="path" ></large-card>

Here is a jfiddle you can test it in https://jsfiddle.net/skribe/xvwvx2b7/1/

Upvotes: 1

Related Questions