HolaMundo.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>Cómo establecer la condición para el valor de la matriz dentro de v-for. No estoy seguro, si es la forma correcta, estoy pensando en usar la propiedad calculada para manejar mi lógica como se indica en el código.
Básicamente tengo 3 matrices. en cada matriz tengo valores como "a,b,c,d,e,x,y,z". Entonces, en función de esos valores en cada matriz en la propiedad calculada, quiero manejar la lógica e imprimir el estado particular en la línea de flecha.
Su uso de la propiedad computed es incorrecto.
Debe vincular el status de la propiedad calculada a cada objeto dentro de la matriz de paints .
La mejor opción para esta será crear un componente separado para mostrar el estado.
Me he referido a esta respuesta para la implementación de su solución.
Lógica
Cree un componente StatusComponent dentro del componente HelloWorld y pase el box , paint y haga matchingdata datos como accesorios.
Entonces su componente HelloWorld.vue será como se muestra a continuación.
plantilla
<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>Texto
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", }, }; }, };Implementación final