Vue.js 2+Vuetify中v-for循环时v-sheet的color属性动态传值失效怎么办

问题根因 #

Vue 框架规定，所有需要绑定动态值（变量、表达式、计算值等）的组件/HTML 属性，必须在属性名前添加冒号 :（v-bind: 的语法简写）。你之前的两种写法都属于静态字符串赋值，Vue 不会解析内部的变量，因此 color 属性无法拿到正确值：

• color="${color}" 会直接将字符串 `${color}` 传递给组件，不会解析变量
• color="{{ color }}" 写法错误，双大括号 {{ }} 仅适用于模板文本插值，不能用于属性赋值

正确写法 #

直接给 color 属性添加冒号，绑定变量即可：

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

内容的提问来源于stack exchange，提问作者Daniel