i'm making a questions list and i'm trying to change the color of a question in the list with v-model and v-for for options but when change the color of one question it changes all question at once

<template>
   <div  id="app">
  <h1>questions list</h1>
  <div >
    <input type="text" v-model="que" : autofocus>
    <span >
     
        <button @click="inputCls='inputbox extend'" 
         
        v-if="!showIcon">Add questions</button>
        <button @click="addqueS" 
        
         v-else>Add</button>
      
    </span>
  </div>

  <div >
    <ul  v-if="queS.length > 0">
      <transition-group name="list">
        <li : v-for="(item) in queS" :key="item">
          <span>{{ item.task }}</span>
          
         
          <span>
           

       

            <button @click="deleteque()" 
            >Delete</button>

            <select  v-model="bgColour">
   <option v-for="myClass in classes" :value="myClass">{{ myClass }}
    
  </option>
</select>

          </span>
        </li>
        
        
      </transition-group>
    </ul>
    <h3 v-else>No question to display. Add one.</h3>
  </div>
</div>
</template>

the delete methode is working perfectly i tried to implemnt the same methode but it didint work out im still new to vuejs

export default {
  name: "App",
  data() {
    return {
    
    que: '',
    queS: [],
    inputCls: 'inputbox',

    bgColour: 'white',
    classes: [ 'Blue', 'Red', 'Green'
    ],

    };
  },
   watch: {
    que(value) {
      if(value.length > 2) {
        this.showIcon = true;
      }
      else {
        this.showIcon = false;
      }
    }
  },

  methods: {


     addqueS() {
      this.inputCls = 'inputbox';
      this.queS.unshift(
        {
          task: this.que,
          completed: false
        }
      );
      this.que = '';
      setTimeout(() => {
        this.showIcon = false;
      }, 1000);
    },
   
    deleteque(index) {
      this.queS.splice(index, 1);
    },

  },
 
  
};

CSS

<script>
.Blue {
  background: blue;
}

.Red {
  background: red;
}

.Green {
  background: green;
}
</script>

CodePudding user response：

You can add bgColor to queS array item, and connect v-model for select to that:

new Vue({
  el: "#demo",
  data() {
    return {
      que: '',
      queS: [],
      showIcon: true,
      inputCls: 'inputbox',
      bgColour: 'white',
      classes: [ 'Blue', 'Red', 'Green'],
    };
  },
   watch: {
    que(value) {
      if (value.length > 2) {
        this.showIcon = true;
      }
      else {
        this.showIcon = false;
      }
    }
  },
  methods: {
    addqueS() {
      this.inputCls = 'inputbox';
      this.queS.unshift({ task: this.que, completed: false });
      this.que = '';
      setTimeout(() => {
        this.showIcon = false;
      }, 1000);
    },
    deleteque(index) {
      this.queS.splice(index, 1);
    },
  },
})

.Blue {
  background: blue;
}

.Red {
  background: red;
}

.Green {
  background: green;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div  id="demo">
  <h1>questions list</h1>
  <div >
    <input type="text" v-model="que" : autofocus>
    <span >
      <button @click="inputCls='inputbox extend'" 
         
        v-if="!showIcon">Add questions</button>
      <button @click="addqueS" 
        
         v-else>Add</button>
    </span>
  </div>
  <div >
    <ul  v-if="queS.length > 0">
      <transition-group name="list">
                <!--