How to add more than one attributes to an element dynamically in vuejs

Question

I am trying to think of a way to add more than one attribute dynamically. Below is a mockup code for that. If I loop through attributes and try to add it to img tag then I'll have more than one image tag and that I don't want. I want to have all the attributes inside the array to be on the same element.

Any help would be appreciated.

<template>
  <img />
</template>

<script>
export default {
 data(){
  attributes: [
    {class: 'main'},
    {src: '/somthing/img.jpg'}
  ]
 }
}
</script>

Fifciuu · Accepted Answer · 2020-04-26 10:40:21Z

1

You can use v-bind for that purpose. Example:

<template>
  <img v-bind="attributes"/>
</template>

<script>
export default {
 data(){
  return {
    attributes: {
      class: 'main',
      src: '/somthing/img.jpg'
    }
  }
 }
}
</script>

If you would like to also dynamicly bind event's listeners you could use v-on same way as I did with v-bind

edited Apr 26, 2020 at 10:40

answered Apr 26, 2020 at 10:28

Fifciuu

8646 silver badges8 bronze badges

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

6 Comments

Mohib Arshi Over a year ago

I don't want to add every attribute myself. I want to loop through it and add them all dynamically.

Fifciuu Over a year ago

My method adds each attribute from an array to img tag just with one v-bind. You do not have to bind each key. Didn't you need exactly that?

Mohib Arshi Over a year ago

But you are not looping through the attributes array ?

Fifciuu Over a year ago

I modified the code in the response. Check it now. It does not require an array

Mohib Arshi Over a year ago

So basically, v-bind loops through the object itself and adds the attributes ?

|

Collectives™ on Stack Overflow

How to add more than one attributes to an element dynamically in vuejs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related