5

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>

How to set condition for array value inside v-for. I am not sure, weather it is correct way, I am thinking to use computed property for handling my logic like wise given in the code.

Basically i have 3 arrays. in each array i have values like "a,b,c,d,e,x,y,z". So based on those values in each array in the computed property i want to handle the logic and print the particular status on the arraow line.

Improve this question
1

1 Answer 1

Reset to default
3

Your usage of computed property is wrong.

You have to bind the computed property status, to each objects inside paints array.

The best option for this one will be creating a seperate component to display the status.

I have refered to this answer for your solution implementation.

Logic

Create a component StatusComponent inside HelloWorld component and pass box, paint and matchingdata as props to it.

So your HelloWorld.vue component will be as below.

template

<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>

Script

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",
      },
    };
  },
};

Final Implementation

Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@Sundar StatusComponent.status will not work. Because StatusComponent is a component and not a propery. You can move your colouring logic to the StatusComponent
@Sundar I have updated the answer and the fiddle.
Its possible. Update the css selectors.
@Sundar Just use .content > .line > div > div , .content > .line > div > div:before and .content > .line > div > div:after as the selectors in css