Change Background Color based on the selected Type

Question

I have this <Select> to choose which type they want to input

<select class="form-control" id="exampleFormControlSelect1"  v-model="exType">
  <option v-for="option in typeOption"> {{option}}</option>
</select>

typeOption:['Income', 'Primer', 'Skunder', 'Tersier'],

I have tried using this code but the row where its inputed still have a white background

<script>
    $(function(){
      $("tr").each(function(){
        var col_val = $(this).find("td:eq(i)").text();
        if (col_val == "Income"){
          $(this).addClass('color1');
        }
        else if (col_val == "Primer"){
          $(this).addClass('color2');
        }  
        else if (col_val == "Skunder"){
          $(this).addClass('color3');
        } 
        else if (col_val == "Tersier"){
          $(this).addClass('color4');
        }
      });
    });
</script>

this is the <style>

<style>
  .color1 {
    background-color: #87CEFA;
  }
  
  .color2 {
    background-color: #90EE90;
  }
  
  .color3 {
    background-color: #FFA07A;
  }
  
  .color4 {
    background-color: #F08080;
  }
</style>

Answer 1

If I understood You correctly maybe something like following:

new Vue({
  el: '#demo',
  data() {
    return {
      typeOption:['Income', 'Primer', 'Skunder', 'Tersier'],
      exType: null,
      dummyData: [{id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}]
    }
  },
})

Vue.config.productionTip = false
Vue.config.devtools = false

.Income {
  background-color: #87CEFA;
}

.Primer {
  background-color: #90EE90;
}

.Skunder {
  background-color: #FFA07A;
}

.Tersier {
  background-color: #F08080;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="dum in dummyData" 
        :key="dum.id" 
        :class="exType?.id === dum.id && exType?.col">
      <select class="form-control" id="exampleFormControlSelect1"  v-model="exType">
        <option v-for="option in typeOption" 
                :value="{id: dum.id, col: option}"> 
          {{ option }}
        </option>
      </select>
      {{ dum.name }}
    </li>
  </ul>
</div>