dynamically build a html color enhanced list using vueitify

问题

I have this code

     <div class="row form-group" v-for="(author, key) in authorData" :key="key">
            <v-layout row wrap>
              <v-flex xs1 sm1 md1 text-xs-center>                   
                <div>
                  <v-checkbox
                    label
                    :key="author.PmPubsAuthorID"
                    v-model="authorData[key].checked"
                    v-bind:id="author.PmPubsAuthorID.toString()"
                    color="success"
                    @change="authorCBClicked(authorData[key])"
                  ></v-checkbox>                 
                </div>
                <!-- </v-card-text>
                </v-card>-->
              </v-flex>
              <v-flex xs10 sm10 md10>
                <v-card>
                  <v-card-text class="px-0">
                    <b>Author:</b>
                    <template v-if="author.Last_Name">{{' ' + author.Last_Name +' '}}</template>
                    <template v-if="author.Initials">{{author.Initials + ' '}}</template>
                    <template>
                      <br />
                      <b>Program:</b>
                      <b>
                        <font color=" + author.color + ">{{' ' + author.ProgramCode}}</font>
                      </b>
                    </template>
                    <br />
                    <template v-if="author.Affiliation">
                      <b>Affiliation:</b>
                      {{' ' + author.Affiliation}}.
                    </template>
                    <br />
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex xs1 sm1 md1 text-xs-center>                    
              </v-flex>
            </v-layout>
          </div>

inside a . I am building the elements in the loop and I would like to have the Program_Code display in the color that is assigned to that program. Each separate program is different. I posted a simular question that help me greatly in a different area with HTML formating at HTML in a Vuetify v-dialog but this is a different problem. How can I get the author.ProgramCode to have the font color? Do I need to build what was the answer on the other StackOverflow tread in a dynamic array? or closer to Dynamic v-model don't complete inputs using v-html directive

Thanks

回答1:

If the goal is to show the text using data provided as Boussadjra mentioned, then you can do the following (In Vue, you can bind style to objects. This is what the code is doing):

<span v-bind:style="{ color: author.color }">{{' ' + author.ProgramCode}}</span>

Note that the font tag is not supported by HTML5.

来源：https://stackoverflow.com/questions/57317384/dynamically-build-a-html-color-enhanced-list-using-vueitify

标签

Vue.js

vuetify.js