Vuetify.js/Vue.js: Переменная в реквизитах в цикле v-for

#vue.js

Вопрос:

Я перебираю список (я использую Vue.js 2 и Vuetify), и я хочу иметь несколько <v-sheet> , которые имеют разные цвета. Я пытался:

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

но это не соответствует color соответствующему значению.

Я тоже пытался color="{{ color }}" , но безуспешно. color Переменной присваивается допустимое значение, т. е. #1234ab .

Ответ №1:

Если вы хотите назначить переменные, вам нужно использовать синтаксис привязки (см. двоеточие перед цветом).

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