I am currently working on a project using Vue.js where I want to display colored cards from MaterializeCSS. The colors are stored as hex codes in a separate database and are part of items looped through with the v-for loop, like this:
<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 want to link the post.color to the card for styling purposes. I attempted to do this by adding :color="post.color" to the top-level card element but that didn't work. How can I properly bind a color property to a looped MaterializeCSS card? Appreciate any guidance!