如何在Vuejs中为v-for中的数组值设置条件？

Question

HelloWorld.vue

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <BaseAccordian>
        <template v-slot:title>{{ box.name }}</template>
        <template v-slot:content>
          <div
            v-for="paint in paints"
            :key="paint.id"
            class="line"
            :class="{
              green: paint.status === 'ok',
              red: paint.status === 'notok',
              pink: paint.status === 'medium',
            }"
          >
            <div>{{ paint.name }}</div>
            // only status like ok,not, medium to be printed on line accordingly
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template>


<style scoped>
.content > .line > div {
  --line-width: 2px;
  --x-offset: 8px;
  --x-width: 120px;

  position: relative;
  padding-bottom: var(--line-width);
}
.content > .line > div:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--x-offset);
  width: var(--x-width);
  height: 100%;
  border-left: var(--line-width) dashed currentColor;
  border-bottom: var(--line-width) dashed currentColor;
}
.content > .line > div:after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--line-width) * 1.75);
  left: calc(var(--x-offset) + var(--x-width));
  width: 0;
  height: 0;
  border: calc(var(--line-width) * 2.5) solid transparent;
  border-right: 0;
  border-left: calc(var(--line-width) * 5) solid currentColor;
}

.green {
  color: green;
  font-weight: bold;
}
.red {
  color: red;
  font-weight: bold;
}
.pink {
  color: pink;
  font-weight: bold;
}
</style>

如何在 v-for 中设置数组值的条件。我不确定，天气是否正确，我正在考虑使用计算属性来处理我的逻辑，就像代码中给出的那样。

基本上我有 3 个数组。在每个数组中，我都有像“a、b、c、d、e、x、y、z”这样的值。因此，基于计算属性中每个数组中的这些值，我想处理逻辑并在箭头行上打印特定状态。

Answer 1

你对computed属性的使用是错误的。

您必须将计算属性 status 绑定到 paints 数组中的每个对象。

最好的选择是创建一个单独的组件来显示状态。

我已参考this 回答您的解决方案实施。

逻辑

在HelloWorld 组件内创建一个组件StatusComponent，并将box、paint 和matchingdata 作为道具传递给它。

所以您的 HelloWorld.vue 组件将如下所示。

模板

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <BaseAccordian>
        <template v-slot:title>{{ box.name }}</template>
        <template v-slot:content>
          <div
            v-for="paint in paints"
            :key="paint.id"
            class="line"
          >
            <div>
              {{ paint.name }}
              <StatusComponent :box="box" :paint="paint" :matchingdata="matchingdata" />
              <!--only status like ok,not, medium to be printed on line accordingly -->
            </div>
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template>

脚本

import BaseAccordian from "./BaseAccordian.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
    StatusComponent: {
      props: ['box', 'paint', 'matchingdata'],
      template: `<div 
        :class="{
          green: status === 'ok',
          red: status === 'notok',
          pink: status === 'medium',
        }">{{status}}</div>`,
      computed: {
        status() {
          const box = this.box;
          const paint = this.paint;
          const matchingdata = this.matchingdata;
          let status = "";
          if (
            box.a == "ok" &&
            box.b == "ok" &&
            box.c == "ok" &&
            box.d == "ok" &&
            box.e == "ok" &&
            paint.a == "ok" &&
            paint.b == "ok" &&
            paint.x == "ok" &&
            paint.d == "ok" &&
            paint.y == "ok" &&
            matchingdata.a == "ok" &&
            matchingdata.e == "ok" &&
            matchingdata.y == "ok" &&
            matchingdata.z == "ok"
          ) {
            status = "Ok";
          } else if (
            box.c == "ok" &&
            box.d == "ok" &&
            box.e == "ok" &&
            paint.x == "ok" &&
            paint.d == "ok" &&
            paint.y == "ok" &&
            matchingdata.e == "ok" &&
            matchingdata.y == "ok" &&
            matchingdata.z == "ok" &&
            (box.a != "ok" ||
              box.b != "ok" ||
              paint.a == "ok" ||
              paint.b == "ok" ||
              matchingdata.a != "ok")
          ) {
            status = "medium";
          } else if(
            box.a != "ok" ||
              box.d != "ok" ||
              box.e != "ok" ||
              paint.x != "ok" ||
              paint.d != "ok" ||
              paint.y != "ok" ||
              matchingdata.e != "running" ||
              matchingdata.y != "ok" ||
              matchingdata.z != "ok"
          ) {
              status = "notok";
            }
            return status;
          }
        }
      }
  },
  data() {
    return {
      // status: ["ok", "notok", "medium"],
      boxes: [
        { id: "1", price: "12", name: "apple", a: "ok", b: "ok", c: "ok", d: "ok", e: "ok" },
        { id: "2", price: "11", name: "bananna", a: "ok", b: "ok", c: "ok", d: "close", e: "ok"},
        { id: "3", price: "10", name: "grapes", a: "ok", b: "ok", c: "ok", d: "close", e: "ok" },
        { id: "4", price: "9", name: "choc", a: "ok", b: "ok", c: "ok", d: "close", e: "ok",},
        { id: "5", price: "8", name: "chips", a: "ok", b: "ok", c: "ok", d: "close", e: "ok", },
        { id: "6", price: "7", name: "kat", a: "ok", b: "ok", c: "ok", d: "close", e: "ok",},
      ],

      paints: [
        {id: "1",price: "100",name: "assian",a: "ok",b: "ok",x: "ok",d: "ok",y: "ok",},
        {id: "2",price: "101",name: "vvv",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
        {id: "3",price: "102",name: "zcx",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
        {id: "4",price: "103",name: "aaa",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
        {id: "5",price: "104",name: "bbb",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
        {id: "6",price: "105",name: "asdf",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
      ],

      matchingdata: {
        a: "ok",
        e: "ok",
        y: "ok",
        z: "ok",
      },
    };
  },
};

最终实现

Fiddle