title: v-card backgroundColor is not changing using getElementById
body: <p>I have to make a small web page of blood bank. The blood group, it's quantity and its donors list(i.e recieve_from) are stored in cards array.I have to change the background color of donor blood group cards of the selected blood group at @change event. I have used javascript to change their background color to light green. However, the change is not visible. I don't know what is wrong with the code. I am not able to identify the error in the code. Is there any other way to change the color of the cards.</p>
  
  <pre><code> &lt;v-card&gt;
              &lt;v-container fluid grid-list-md&gt;
                &lt;v-layout row wrap&gt;
                  **&lt;v-flex v-for="card in cards" :key="card.blood_group"&gt;
                    &lt;v-card class="black--text" height="120px" width="220px" :id="card.blood_group" style="background-color:lightgray"&gt;**
                      &lt;v-flex xs12&gt;
  
                        &lt;v-card-title&gt;
                          &lt;h2 class="justify-center"&gt;{{ card.blood_group }}&lt;/h2&gt;
                        &lt;/v-card-title&gt;
                      &lt;/v-flex&gt;
                    &lt;/v-card&gt;
                    &lt;v-flex&gt;
                      &lt;v-layout column justify-space-between fill-height&gt;
                        &lt;v-card class="black--text" width="220px" color="grey lighten-2"&gt;
                          &lt;v-divider&gt;&lt;/v-divider&gt;
                          &lt;v-card-text&gt;
                            {{ card.quantity }}&lt;/v-card-text&gt;
                        &lt;/v-card&gt;
                      &lt;/v-layout&gt;
                    &lt;/v-flex&gt;
                  &lt;/v-flex&gt;
                &lt;/v-layout&gt;
              &lt;/v-container&gt;
              &lt;v-layout justify-center xs12 sm3 md3 row wrap&gt;
                &lt;v-layout column wrap&gt;
                  &lt;v-flex xs12 sm5 md5 d-flex offset-sm3&gt;
                    **&lt;v-autocomplete v-model="select" :items="cards" label="Blood required" item-text="blood_group"
                      required @change="eligibleDonors"&gt;&lt;/v-autocomplete&gt;**
                  &lt;/v-flex&gt;
                  &lt;v-flex xs12 sm6 md4 offset-sm3&gt;
                    &lt;v-text-field v-model="bottles" label="Number of bottles" readonly&gt;&lt;/v-text-field&gt;
                  &lt;/v-flex&gt;
                &lt;/v-layout&gt;
                &lt;v-layout column wrap&gt;
                  &lt;v-flex xs12 sm6 offset-sm3 padding-a-3&gt;
                    &lt;v-card height="300px" width="450px" style="border: black 3px"&gt;
                    &lt;/v-card&gt;
                    &lt;p style="text-align: center"&gt; Bucket&lt;/p&gt;
                  &lt;/v-flex&gt;
                &lt;/v-layout&gt;
  
  
              &lt;/v-layout&gt;
            &lt;/v-card&gt;    &lt;script&gt;
  
          new Vue({
            el: '#app',
            data: {
              cards: [
                { blood_group: 'A+', quantity: 3, recieve_from: ['A+', 'A-', 'O+', 'O-'] },
                { blood_group: 'B+', quantity: 8, recieve_from: ['B+', 'B-', 'O+', 'O-'] },
                { blood_group: 'O+', quantity: 2, recieve_from: ['O+', 'O-'] },
                { blood_group: 'AB+', quantity: 5, recieve_from: ['A+', 'A-', 'O+', 'O-', 'AB+', 'B+', 'B-', 'AB-'] },
                { blood_group: 'A-', quantity: 9, recieve_from: ['A-', 'O-'] },
                { blood_group: 'B-', quantity: 6, recieve_from: ['B-', 'O-'] },
                { blood_group: 'O-', quantity: 8, recieve_from: ['O-'] },
                { blood_group: 'AB-', quantity: 3, recieve_from: ['AB-', 'A-', 'B-', 'O-'] }
              ],
              select: '',
              bottles: '',
              card_select: ''
            },
            methods: {
              eligibleDonors(event) {
  
                for (let i = 0; i &lt; this.cards.length; i++) {
                  if (this.select == this.cards[i].blood_group) {
                    var selection = i;
                    break;
                  }
                }
                for (let i = 0; i &lt; this.cards[selection].recieve_from.length; i++) {
                  this.card_select = this.cards[selection].recieve_from[i]
                  console.log("eligible blood group: " + this.card_select)
                  **document.getElementById(this.card_select).style.backgroundColor = "green"**
                  console.log(document.getElementById(this.card_select).style.backgroundColor)
                }
              }
            }
          })
        &lt;/script&gt;
  </code></pre>