如果动态变量为真则绑定 class [全部在 v-for 中]

Question

对不起我的代码，但我是 Vue 的新手。

我有 5 个这样的跨度项 [跨度：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 个灰色圆圈相匹配。 classes 'selected1, selected, ...' 用 5 种不同的颜色填充圆圈。 "isActive" 是一个包含 5 个布尔变量的数组 [false, false, false, false, false]。为了更改这些布尔变量的语句，我使用了一个每次从 Firebase 获取数据时都会触发的函数。

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

所以当 isActive[0] 为真时，跨度被填充，当 isActive1 为真时，跨度被填充，等等......

我使用的函数名为 "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 创建的每张卡片都具有相同的跨度颜色。我想要一张具有不同填充跨度的卡片。下图显示了问题。 problem

Answer 1

你有一个全局变量isActive[]

您正在从数据库中获取对象数组。

然后您为每个检索到的对象调用 setDiff(someString)。每次调用该函数时，您实际上都会覆盖上一次调用设置的值。

您可以使 isActive 成为二维数组（例如 isActive[item.id][0]）或在将其推送到 ricettario 数组之前将 isActive 附加到 ricetta

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

对于这个问题，你甚至可以使用简单的 CSS 和来自 ricetta.diff

的 :class

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

如果动态变量为真则绑定 class [全部在 v-for 中]

Bind class if a dynamic variable is true [all in v-for]

javascript

vue.js

vue-component

vuejs2

v-for