How to bind a color to a card in MaterializeCSS

Question

I am attempting to build a Vue.js interface that returns colored MaterializeCSS cards to the screen. post.color (stored as a hex code in a separate database) is one of several items looped through in a v-for loop, as seen below:

      <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>

I am attempting to bind post.color to the card, in order to style the card with that respective color. I tried adding :color="post.color" to the outermost card element, but this did not work. What is the proper way to bind a looped-through color property to a MaterializeCSS card? Thanks!

Answer 1

div is an HTML native element which have a fixed number of attributes, it's not a Vue component which accept some defined props, so, in order to achieve your goal you should use style attribute and add the following rule :

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