6

Given an items array of objects:

items: [{
 label: 'My Link',
 attrs: {
  href: '/route',
  target: '_blank',
  title: 'Some title',
 },
},{
 label: 'My Link 2',
 attrs: {
  href: '/route2',
  target: '_self',
  title: 'Some title 2',
 },
}];

My vue has a v-for that loops through a list of items:

<ul>
  <li v-for="item in items">
    <a ADD_ITEM_ATTRIBUTES_HERE>{{ item.label }}</a>
  </li>
</ul>

How can I loop through each item's attribute and dynamically add it to the anchor element where the Attribute name is the object key and the attribute value is its matching value?

I'm coming from jQuery world where this kind of manipulation is pretty straight forward, but I'm not sure how to modify the DOM in this case.

Most questions I find here have to do with checking if an element has a prop or meets a condition to set its value. I'm not trying to do that. In my case I don't know what the prop will be nor its value.

gdaniel
  • 1,307
  • 2
  • 10
  • 17
  • Possible duplicate of [How to bind to attribute in Vue JS?](https://stackoverflow.com/questions/43062149/how-to-bind-to-attribute-in-vue-js) – Graham Oct 02 '18 at 19:33

1 Answers1

9

Since you already have attributes in an object, you can directly pass it to v-bind; Also see bind an object of attributes example:

<a v-bind="item.attrs">{{ item.label }}</a>

This will result in keys in attrs object as attributes and values in attrs as corresponding values.

tony19
  • 125,647
  • 18
  • 229
  • 307
Psidom
  • 209,562
  • 33
  • 339
  • 356