Home > Software engineering >  How to dynamically add attributes in vue.js components
How to dynamically add attributes in vue.js components

Time:11-04

I am making a news website using NYT REST API. I want to add attributes to the components dynamically using the document.getElementsByClassName()

For Example, I want to add a title to my component (the title is a prop actually of type String), I want to add it dynamically using a loop. I have added it normally in the given code snippet, but what if I have 30 components and I have data in an array and I want to give title from that array.

<News_Card class="card" :title='this.all_data[0].title' />

I want this :title='this.all_data[0].title to be added using loop

CodePudding user response:

You could use v-for directive to render the all_data items :

<News_Card class="card" v-for="(item,index) in all_data" 
                    :title='item.title' :key="index" />
  • Related