CODEWITHSUNDEEP
vue.js
Mohib Arshi
Mohib Arshi

Reputation: 830

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

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>

Upvotes: 0

Views: 557

Answers (1)

Fifciuu
Fifciuu

Reputation: 864

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

Upvotes: 1

Related Questions