使用串列中的選擇選項更改特定專案的顏色

我正在制作一個問題串列，我正在嘗試使用 v-model 和 v-for 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>

洗掉方法運行良好我試圖實作相同的方法但它沒有解決我對 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>

uj5u.com熱心網友回復：

您可以添加bgColor到queS陣列項，并連接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>

標籤：javascript 拉拉维尔 Vue.js

上一篇：如何在代碼中找到方法的定義？

下一篇：將物件陣列與嵌套合并