Vue.js attribute binding from a list or object

Question

I'm experimenting with Vue.js (2.3). I'm comfortable with attribute binding manually e.g.

Vue.component('my-component', {
    props: ['info'],
    computed: {
        type: function() { return info.type },
        classList: function() { return this.info.attributes.classList },
        id: function() { return this.info.attributes.id }
    }
    template: '<component :is="type" :class="classList" :id="id">{{ info.text }}</component>'
})

where info =

{
    text: 'Some text',
    type: 'h2',
    attributes: {
        classList: 'a string',
        id: 'another-string'
    }
}

This would output the following:

<h2 class="a string" id="another-string">Some text</h2>

But what if I want to bind all the attributes inside my attributes object, regardless of how many or what they are e.g. my info might look like this:

{
    text: 'Some text',
    type: 'td'
    attributes: {
        classList: 'a string',
        id: 'another-string',
        colspan: '3',
        rowspan: '2',
        title: 'A string',
        ...
    }
}

How can I bind all these attributes without having to list all the possible attributes that might crop up?

I should add I could modify the attributes property to be a list or object, whatever is easier. E.g. attributes: [{key:"id", value:"a-string"},...] — chrism
– chrism, Commented Jun 30, 2017 at 9:47

tony19 · Accepted Answer · 2022-07-15 20:27:39Z

12

v-bind accepts an object as it's parameter and binds all the properties to their values.

template: '<component :is="type" v-bind="info.attributes"></component>'

edited Jul 15, 2022 at 20:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 30, 2017 at 12:13

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

1 Comment

chrism Over a year ago

How did I miss that? Thanks very much, works as you would expect.

Collectives™ on Stack Overflow

Vue.js attribute binding from a list or object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related