Question

我必须制作一个小型的血库网页。血型，数量及其捐赠者列表（即recipe_from）存储在卡片数组中。我必须在@change事件中更改所选血型的捐赠者血型卡片的背景颜色。我已经使用JavaScript将其背景颜色更改为浅绿色。但是，更改不可见。我不知道代码有什么问题。我无法识别代码中的错误。还有其他方法可以更改卡的颜色。

 <v-card>
            <v-container fluid grid-list-md>
              <v-layout row wrap>
                **<v-flex v-for="card in cards" :key="card.blood_group">
                  <v-card class="black--text" height="120px" width="220px" :id="card.blood_group" style="background-color:lightgray">**
                    <v-flex xs12>

                      <v-card-title>
                        <h2 class="justify-center">{{ card.blood_group }}</h2>
                      </v-card-title>
                    </v-flex>
                  </v-card>
                  <v-flex>
                    <v-layout column justify-space-between fill-height>
                      <v-card class="black--text" width="220px" color="grey lighten-2">
                        <v-divider></v-divider>
                        <v-card-text>
                          {{ card.quantity }}</v-card-text>
                      </v-card>
                    </v-layout>
                  </v-flex>
                </v-flex>
              </v-layout>
            </v-container>
            <v-layout justify-center xs12 sm3 md3 row wrap>
              <v-layout column wrap>
                <v-flex xs12 sm5 md5 d-flex offset-sm3>
                  **<v-autocomplete v-model="select" :items="cards" label="Blood required" item-text="blood_group"
                    required @change="eligibleDonors"></v-autocomplete>**
                </v-flex>
                <v-flex xs12 sm6 md4 offset-sm3>
                  <v-text-field v-model="bottles" label="Number of bottles" readonly></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout column wrap>
                <v-flex xs12 sm6 offset-sm3 padding-a-3>
                  <v-card height="300px" width="450px" style="border: black 3px">
                  </v-card>
                  <p style="text-align: center"> Bucket</p>
                </v-flex>
              </v-layout>


            </v-layout>
          </v-card>    <script>

        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 < this.cards.length; i++) {
                if (this.select == this.cards[i].blood_group) {
                  var selection = i;
                  break;
                }
              }
              for (let i = 0; i < 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)
              }
            }
          }
        })
      </script>

Answer 1

一种实现方法是添加important以覆盖可视化样式。

example

v卡backgroundColor不会使用getElementById

1 个答案: