title: VueJs - dynamic class in a loop
body: <p>Every time I select a <code>div</code> element, I want only that element to change color. With my current code, when I click an element, it changes the color for all items using the variable <code>color</code>, but I don't know how to make only the selected element change color.</p>
  
  <p>This is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div class="row"&gt;        
     &lt;div v-for="(item, index) in seatShows" :key="index"&gt;
       &lt;div class="col-auto" @click="select(item)"&gt;
         &lt;div class="icon icon-shape text-white" :class="[color]"&gt;
           &lt;img src="/images/butaca2-lg.png" class="position-relative"&gt;
           &lt;a class="text-white position-absolute"&gt; {{item.id_seat}} &lt;/a&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;    
   &lt;/div&gt;
  </code></pre>
  
  <p>And this is my Vue Code:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default {
    props: ['route'],
    data() {
      return {
        seatShows: this.route,
        color: 'bg-seat-empty',
      }
    },
    methods:{
      select(item) {
        this.color = 'bg-primary';
        console.log(item) ;
        return this.color;
      },
      sel(item) {
        console.log(item.status_ticket);
      }
    }
  }
  </code></pre>