[Vuejs]-How can i pass background color as Prop in for loop?

by

0👍

You can create a method to bind the class attribute and pass the index as a parameter. For each line, you can evaluate and return a different class to this element.

You can check am example here

methods:{
		spanClass: function(index) {
			return {
				in: index % 2 === 0,
				out: index % 2 !== 0
			}
		}
li.in {
  background-color:red;
}

li.out {
  background-color:black;
}
<template>
<div class='about'>
  <mynewcomponent v-for="(item,index) in 100"/>>

    <template v-slot:header>
      <h3 style="text-align: left;"><span :class="spanClass(item)">ID: 1234</span></h3>
    </template>
        <template v-slot:TestDesciption>
      <h3 style="text-align: left">example shit</h3>
    </template>
  </mynewcomponent>
</div>
</template>

Leave a comment