如果动态变量为真则绑定类 [all in v-for]

Posted 2023-02-23

【中文标题】如果动态变量为真则绑定类 [all in v-for]

【英文标题】：Bind class if a dynamic variable is true [all in v-for]

【发布时间】：2020-06-11 09:00:01

【问题描述】：

对不起我的代码，但我是 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 个灰色圆圈。类“selected1, selected, ...”用 5 种不同的颜色填充圆圈。 "isActive" 是一个包含 5 个布尔变量 [false, false, false, false, false] 的数组。 为了更改这些布尔变量的语句，我使用了一个每次从 Firebase 获取数据时都会触发的函数。

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

所以当 isActive[0] 为真时，span 被填满，当 isActive1 为真时，span 被填满，等等......

我使用的函数名为“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

【问题讨论】：

每个 selected1, selected2, .. 是不同的颜色吗？

你的for循环非常重复，我会把它放在方法的末尾。所以你的switch 语句只设置i 的值。另外，我会将isActive 的值重置为false，然后再将其中一些设置为true。使用console.log 检查i 的值是否真的是它应该在方法结束时的值。

@RobertB。是的！问题解决了，谢谢大家！

【参考方案1】：

你有一个全局变量isActive[]

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

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

您可以将isActive 设为二维数组（例如isActive[item.id][0]）或将isActive 附加到ricetta，然后再将其推送到ricettario 数组

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

【讨论】：

非常感谢！我使用了你的“CSS child”技术。就这样，我切掉了switch语句和函数。一切正常:-)