Binding different css classes the elements created by v-for

Question

I got the elements created by v-for, and i want to give different css classes these elements according to data.To do that I need a way to reach activeNumbers without v-for or use v-for without itteration.

<template>

 <div v-for"n in 20" class="tables" :class="activeClass : activeNumbers == number">{{n}} 
 </div>

</template>

<script> 
data(){
  return {
  activeNumbers:["1","5","8","9","17","12","19"]
 }
}
</script>

<style>
.activeClass{
background: red;
}

.tables{
  border:4px solid;
  max-width: 120px;
  width: 80%;
  display: inline-block;
}
</style>

i tried to use tags to reach activeNumber but it does not work.

Answer 1

If I understand what you're looking for, you want to conditionally add your class if n is in activeNumbers. If so, here's what you would need to do:

<div v-for"n in 20" class="tables" :class="activeNumbers.indexOf(n.toString()) !== -1 ? 'activeClass' : ''">
     {{n}} 
</div>

This sets the class to activeClass if n is in activeNumbers or nothing if not. Let me know if this is what you're looking for.