Как привязать цвет к карточке в MaterializeCSS

Question

Я пытаюсь создать интерфейс Vue. js, который возвращает цветные материализованные CSS карты на экран. post.color (хранится в виде шестнадцатеричного кода в отдельной базе данных) - это один из нескольких элементов, зацикленных в v-for l oop, как показано ниже:

      <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" к самому внешнему элементу карты, но это не сработало. Как правильно связать зацикленное свойство цвета с картой Materialise CSS? Спасибо!

Answer 1

div - это собственный элемент HTML, который имеет фиксированное количество атрибутов, это не компонент Vue, который принимает некоторые определенные параметры, поэтому для достижения своей цели вы должны использовать атрибут style и добавить следующее правило:

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