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

Question

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.

mboldt · Accepted Answer · 2021-10-08 08:29:19Z

1

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>

answered Oct 8, 2021 at 8:29

mboldt

1,83512 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1