title: How to style a singular v-for item in vue, based on a condition?
body: <p>I am making a multiple choice quiz game and want what the user clicked to change to either red or green depending on if that answer is correct or incorrect. I made a variable called selected which is what the user pressed- this does correctly update. I have also got all of the <code>v-for</code> items to change to the same colour depending on if the answer is correct or not, I only need help separating it so that only one of the <code>v-for</code> things change colour.</p>
  <p>Here is my relative HTML:</p>
  <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn&quot; class=&quot;answer&quot; v-for=&quot;option in options&quot; @click=&quot;checkAnswer(option)&quot; @click=&quot;selected = option&quot; :style=&quot;{backgroundColor: colour}&quot;&gt;
      {{option}}&lt;br/&gt;
    &lt;/button&gt;
    &lt;button type=&quot;button&quot; @click=&quot;getQ&quot; @click=&quot;shuffle(options)&quot; class=&quot;btn button next&quot;&gt;Next&lt;/button&gt;
    
  </code></pre>
  <p>Here is the relative JS:</p>
  <pre><code>  let colour = Vue.ref('');
    let selected = Vue.ref('');
    let options = Vue.ref([correctAnswer, incorrectAnswerOne, incorrectAnswerTwo, incorrectAnswerThree]);
  
    // Methods
  
     let shuffle = function(options) {
       let num = options.length, t, raInt;
       //while there are remaining elements to shuffle
          while (num) {
            //choose random
            raInt = Math.floor(Math.random() * num--);
            //swap with current element
            t = options[num];
            options[num] = options[raInt];
            options[raInt] = t;
          }
          return options;
     };
  
     let checkAnswer = function(clicked) {
       console.log(clicked.value);
       console.log(correctAnswer.value);
       if (clicked.value == correctAnswer.value) { // checks if the button that was clicked is the same as the answers value
         this.result = &quot;Correct!&quot;; //if it does, result changes to Correct!
         this.colour = &quot;green&quot;;
      } else {
         this.result = &quot;Incorrect!&quot;; //if the answer is incorrect, result changes to Incorrect!
         this.colour = &quot;red&quot;;
      };
     };
  </code></pre>
  <p>And here is some CSS:</p>
  <pre><code> .answer {
     width: 100%;
     background-color: #dbdbdb;
     padding: 4% 2%;
     margin: 1 0;
   }
  
   .answer:hover {
     background-color: #c2c2c2
   }
  </code></pre>
  <p>I haven’t really tried that much. I’m not sure what to try. In a different project I did style a different div based on what other div was selected, but I am not sure how to change just one part of a <code>v-for</code>, or if it is even possible.</p>
  <p>Thanks in advance</p>