Using variable inside an object in HTML

Question

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!

Do you get an error? What do you mean by "it doesn't work this way"? Because everything seems fine... — acdcjunior
– acdcjunior, Commented Mar 8, 2018 at 21:02

skribe · Accepted Answer · 2018-03-08 21:23:48Z

1

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/

answered Mar 8, 2018 at 21:23

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using variable inside an object in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related