CODEWITHSUNDEEP
vue.js
Daniel
Daniel

Reputation: 1575

Vuetify.js/Vue.js: Variable in props in v-for loop

I am iterating over a list (I'm using Vue.js 2 and Vuetify) and I want to have multiple <v-sheet> that have different colors. I've tried:

<v-sheet v-for="color in schema.colors" :key="color" class="float-left"
  color="`${color}`"
  elevation="1"
  height="40"
  width="40"
></v-sheet>

but that doesn't set color to the appropriate value.

I've also tried color="{{ color }}", without success. The color variable is set to a valid value, i.e. #1234ab.

Upvotes: 0

Views: 123

Answers (1)

mboldt
mboldt

Reputation: 1825

If you want to assign variables then you need to use the bind syntax (see the colon before color)

<v-sheet v-for="color in schema.colors" :key="color" class="float-left"
  :color="color"
  elevation="1"
  height="40"
  width="40"
></v-sheet>

Upvotes: 1

Related Questions