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