使用列表中的 select 選項更改特定項目的顏色

Question

我正在制作一個問題列表，我正在嘗試使用 v-model 和 v-for 選項更改列表中問題的顏色，但是當更改一個問題的顏色時，它會立即更改所有問題

<template>
   <div class="container" id="app">
  <h1>questions list</h1>
  <div class="pol">
    <input type="text" v-model="que" :class="inputCls" autofocus>
    <span class="addBtn">
     
        <button @click="inputCls='inputbox extend'" 
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" 
        v-if="!showIcon">Add questions</button>
        <button @click="addqueS" 
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
         v-else>Add</button>
      
    </span>
  </div>

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

       

            <button @click="deleteque()" 
            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">Delete</button>

            <select class="bg-gray-500" 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>

刪除方法運行完美

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>

Answer 1

您可以將bgColor添加到queS數組項，並將 select 的v-model連接到它：

 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 class="container" id="demo"> <h1>questions list</h1> <div class="pol"> <input type="text" v-model="que":class="inputCls" autofocus> <span class="addBtn"> <button @click="inputCls='inputbox extend'" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" v-if=":showIcon">Add questions</button> <button @click="addqueS" class="bg-blue-500 hover.bg-blue-700 text-white font-bold py-2 px-4 rounded-full" v-else>Add</button> </span> </div> <div class="section"> <ul class="queS" v-if="queS:length > 0"> <transition-group name="list"> <.-- here connect to --> <li,class="item:bgColour" v-for="(item. idx) in queS":key="idx"> <span>{{ item.task }}</span> <span> <button @click="deleteque()" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">Delete</button> <select class="bg-gray-500" v-model="item.bgColour"> <.-- here change v-model --> <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>