CODEWITHSUNDEEP
vue.jsvue-component
velis
velis

Reputation: 10045

In vue.js, how can I render a list as element attributes, not as multiple elements

I can't seem to find a functionality similar to v-for, but for attributes.

I'd like something like:

<div><data-attrs v-for="item in myattrlist">data-{{item.name}}="{{item.value}}"></data-attrs></div>

which would then render to

<div data-name1="value1" data-name2="value2"></div>

My search-fu is insufficient to find how this can be done.

Upvotes: 0

Views: 159

Answers (1)

Shadab
Shadab

Reputation: 1347

You can pass an object to v-bind and the attribtues will be assigned from the object,

Example from Vue docs:

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

In your case it would be something like this,

<div v-bind="myattrlist.reduce((attrObj, attr) => ({...attrObj, ['data-' + attr.key]: attr.value}), {})"></div>

Though I'd suggest creating the attrObj in the data() method rather than in the template

Upvotes: 1

Related Questions