Vue.js中v-for循环内如何为数组元素设置对应判定条件

以下是补全逻辑后的完整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: getPaintStatus(paint) === 'ok',
              red: getPaintStatus(paint) === 'notok',
              pink: getPaintStatus(paint) === 'medium',
            }"
          >
            <div>{{ paint.name }} {{ getPaintStatus(paint) }}</div>
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
// 替换为你实际的三个业务响应式数组
const arr1 = ['a', 'b', 'c', 'd', 'e']
const arr2 = ['x', 'y']
const arr3 = ['z']

// 替换为你实际的boxes、paints原始响应式数据
const boxes = []
const paints = []

// 带缓存的状态判定计算属性
const getPaintStatus = computed(() => {
  return (paint) => {
    // 可替换为你实际的判定规则，比如判断paint的其他字段归属
    if (arr1.includes(paint.name)) return 'ok'
    if (arr2.includes(paint.name)) return 'notok'
    if (arr3.includes(paint.name)) return 'medium'
    // 可自定义默认返回值
    return 'medium'
  }
})
</script>

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

• 使用computed处理该逻辑是合理的，上述方案用computed返回可接收参数的判定函数，既保留了响应式缓存能力，数组变更时会自动更新状态，性能优于直接写methods方法。
• 如果你使用Vue2选项式API，可以把getPaintStatus定义为methods方法，或者额外写一个processedPaints计算属性，提前把status字段挂载到每一个paint项上，循环时直接调用对应字段即可。
• 你可以根据实际业务需求调整computed内部的判定逻辑，比如按多数组交集、优先级等规则返回对应的状态值。

内容的提问来源于stack exchange，提问作者user17525310