如何在MaterializeCSS中将颜色绑定到卡片上

Question

我正在尝试构建一个Vue.js接口，该接口将彩色的MaterializeCSS卡返回到屏幕。 post.color（作为十六进制代码存储在单独的数据库中）是在v-for循环中循环通过的几项之一，如下所示：

      <div
        v-for="post in posts"
        :key="post._id"
      >
        <div class="card darken-1" :color="post.color">
          <div class="card-content left-align">
            <span class="card-title">{{ post.title }}</span>
            <p>{{ post.body }}</p>
          </div>
        </div>
      </div>

我正在尝试将post.color绑定到卡上，以使用相应的颜色来样式化卡。我尝试将:color="post.color"添加到最外面的卡片元素，但这没有用。将循环通过的颜色属性绑定到MaterializeCSS卡的正确方法是什么？谢谢！

Answer 1

div是HTML本机元素，具有固定数量的属性，它不是接受某些已定义道具的Vue组件，因此，为了实现您的目标，您应该使用样式属性并添加以下规则：

 <div class="card darken-1" :style="{background:post.color+'!important'}">