使用v-for循环时如何从数据中获取按钮图标

错误原因 #

你在v-btn的icon属性里用了{{sub.icon}}插值语法，这是错误的——Vue中HTML属性的动态值需要用属性绑定语法（v-bind:或简写:），不能直接用插值。同时原代码的:key="sub.sub"无效，因为你的子类对象里没有sub字段，key需要绑定唯一值。

修正后的代码 #

<v-col v-for="sub in subclasses" :key="sub.value">
  <div class="d-flex justify-center">
    <v-btn               
      @click="goTo(sub.title)"
      class="pa-3 mb-2"
      color="rgb(54, 61, 68)"
      :icon="sub.icon"
    >
    </v-btn>
  </div>
  <p class="text-center">{{ sub.title }}</p>
</v-col>

关键修改点 #

• 把icon={{sub.icon}}改成:icon="sub.icon"：通过属性绑定让Vue解析sub.icon的动态值，正确加载对应的Material Design图标。
• 修正:key绑定：用sub.value（或sub.title）作为唯一key，符合Vue的列表渲染规范。

内容的提问来源于stack exchange，提问作者Abdullah Semih Gür