Случайный цвет фона на vuejs цикле

Question

Небольшая помощь, я застрял. Я даже не знаю, с чего начать. У меня есть v-for для печати моих "контрактов". Я все еще не погружаюсь в рабочий процесс vuejs, поэтому я не могу обойти это.

Как я могу задать другой цвет фона для каждого div-элемента col? Но не случайно, я хочу, чтобы они сохранили цвет, даже если страница перезагружается, мой подход использовал идентификатор моего контракта и что-то делал с ним, но я не очень разбираюсь в vuejs, чтобы знать, как это сделать .

Допустим, я хочу создать функцию javascript для предоставления класса в зависимости от contractType.id, как мне выполнить эту функцию с каждым l oop? Есть ли способ сделать это на vuejs?

<template>
  <div class="row" v-if="contractTypes && contractTypes.length > 0">
    <div class="col-md-4 c-button" v-for="(contractType, index) in contractTypes" :key="index" @click="choose($event.srcElement.innerHTML, index, contractType.id)">
      <div class="col p-4 d-flex flex-column position-static text-center">
          <strong class="d-inline-block mb-2 text-primary">World</strong>
          <h3 class="mb-0">{{ translations && translations[contractType.id] ? translations[contractType.id].usecasetitle : contractType.usecasetitle }}</h3>
          <p class="card-text mb-auto">{{ translations && translations[contractType.id] ? translations[contractType.id].description : contractType.title }}</p>
          <button class="btn btn-primary">Click</button>
        </div>
    </div>
  </div>
  <div v-else>
    <h1>Leider stehen für Sie derzeit keine Verträge zur Auswahl.</h1>
  </div>
</template>

Answer 1

Если вам нужны индивидуальные стили для разных типов контрактов, вы можете method:

/*
 * @param {string} contract -- a foo bar
 * @return {object} -- Bunch of boolean controlled classes
 */
getContractClasses (contract)
{
  return {
    'style1': contract === 'a string',
    'style2': contract === 'another thing',
    'style3': true, // This one is always going to be on and will have a bunch of shared styles between all of them
  }
},

Затем в шаблоне

<h3 :class="getContractClasses(contract)">

Наконец, просто выполните различные стили в руководстве по стилю в компоненте, содержащем v-for.

Кроме того, могу ли я предложить неписаное правило сортировки, чтобы удалить все logi c из слоя шаблона, и использовать это как метод или вычислено? Чтение этого длинного тройного строчного текста - это большое "Нет, спасибо" от меня.