[Vuejs]-Not able to dynamically set color of Vue avatar with style property

by

3👍

✅

you must use :style syntax to bind the styles properly, this allows to use JS to call the function

<div id="app">
  <v-app id="inspire">
    <v-row justify="space-around">
  
      <v-avatar style="background-color: bisque;">
        <span class="white--text headline">CJ</span>
      </v-avatar>
      <!-- this is the one working! -->
      <v-avatar :style="{ backgroundColor: getcolor('ngae')}">
        <span class="white--text headline">CJ</span>
      </v-avatar>
      
      <v-avatar :color="getcolor('name')">
        <span class="white--text headline">CJ</span>
      </v-avatar>
  
    </v-row>
  </v-app>
</div>

You can read about style bindings here

👤Andres Foronda

Leave a comment