Привязать класс, если переменная Dynami c имеет значение true [все в v-for]

Question

Извините за мой код, но я новичок с Vue.

У меня есть 5 таких объектов, таких как [span with: class]

              <span class="bars">
                <span class="bar" :class="{ selected1: isActive[0] }"></span>
                <span class="bar" :class="{ selected2: isActive[1] }"></span>
                <span class="bar" :class="{ selected3: isActive[2] }"></span>
                <span class="bar" :class="{ selected4: isActive[3] }"></span>
                <span class="bar" :class="{ selected5: isActive[4] }"></span>
              </span>

Они соответствуют 5 серым круги. Классы selected1, selected, ... заполняют круги 5 разными цветами. «isActive» - это массив из 5 логических переменных [false, false, false, false, false]. Чтобы изменить оператор этих логических переменных, я использую функцию, которая запускается каждый раз, когда я получаю данные из Firebase.

  data() {
    return {
      isActive: [], // boolean array
      ricettario: [] // array of firebase data
    };
  },

Так что, когда isActive [0] равно true, промежуток становится заполненным, когда isActive 1 истина, интервал становится заполненным и т. Д. c ...

Используемая мной функция называется "setDiff", которая выбирает данные из базы данных Firebase и помещает их в оператор switch.

// Firebase get data
created() {
    db.collection("ricettarioFirebase")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          let ricetta = doc.data();
          ricetta.data = dayjs(ricetta.data) // time
            .locale("it") // time
            .format("D MMMM YYYY"); // time
            this.setDiff(ricetta.diff); // diff = "molto facile || facile || ..."
          this.ricettario.push(ricetta); // push data to ricettario[]
        });
      });
  }


// Function that change isActive[]
  methods: {
    setDiff(diff) {
      switch (diff) {
        case "molto facile":
          i = 1;
          for (j = 0; j < i; j++) {
            this.isActive[j] = true; // only one filled span
          }
          break;
        case "facile":
          i = 2;
          for (j = 0; j < i; j++) {
            this.isActive[j] = true; // 2 filled span
          }
          break;
        case "medio":
          i = 3;
          for (j = 0; j < i; j++) {
            this.isActive[j] = true; // 3 filled span
          }
          break;
        case "difficile":
          i = 4;
          for (j = 0; j < i; j++) {
            this.isActive[j] = true; // 4 filled span
          }
          break;
        case "molto difficile":
          i = 5;
          for (j = 0; j < i; j++) {
            this.isActive[j] = true; // 5 filled span
          }
          break;
      }
    }
  }

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

Answer 1

У вас есть одна глобальная переменная isActive[]

Вы извлекаете массив объектов из базы данных.

Затем вы вызываете setDiff(someString) для каждого из найденных объектов. Каждый раз, когда вы вызываете функцию, вы по существу переопределяете значения, установленные предыдущим вызовом.

Вы можете сделать isActive двумерным массивом (например, isActive[item.id][0]) или присоединить isActive к рикетте, прежде чем нажать ее. в массив ricettario

ricetta.isActive = this.setDiff(ricetta.diff); // remember to return isActive from setDiff function
ricettario.push(ricetta)

Для этой задачи вы можете даже использовать простой CSS и класс: от ricetta.diff

https://codepen.io/szkuwa/pen/JjdNYov