Vue.js中基于Dringlichkeit值动态修改列表卡片边框颜色问题

问题根源 #

1. 错误访问数组属性：原代码里itemsDe.Dringlichkeit和itemAt.Dringlichkeit是错误写法——itemsDe/itemsAt是数组，不是单个对象，数组本身没有Dringlichkeit属性，应该访问循环中的**当前列表项item**的对应字段。
2. 框架指令混淆：尝试的:ng-class是Angular的指令，Vue中动态绑定类需要用:class，且原写法的三元表达式嵌套逻辑混乱，存在语法错误。

正确实现方式 #

最简写法（推荐）

你循环的limitedItems本身就是对应选中面板（德国/奥地利）的列表项子集，每个item都自带Dringlichkeit字段，直接判断当前项的属性即可：

<li
  v-for="item in limitedItems"
  :key="item.AuftragsNr"
  class="rounded-lg bg-white shadow-lg p-4 pr-10 relative border-l-8 border-t-4"
  :class="item.Dringlichkeit ? 'border-red-600' : 'border-green-500'"
>

显式关联面板切换（可选）

如果需要明确和selectedDashboard绑定（比如limitedItems可能混合双列表数据），可以结合计算属性items逻辑，但核心还是判断当前item的属性：

:class="(selectedDashboard === 'germany' || selectedDashboard === 'austria') 
  ? (item.Dringlichkeit ? 'border-red-600' : 'border-green-500') 
  : ''"

额外优化建议 #

1. 把类名判断逻辑抽成方法，让模板更简洁：

methods: {
  getBorderClass(item) {
    return item.Dringlichkeit ? 'border-red-600' : 'border-green-500';
  }
}

模板中调用：

:class="getBorderClass(item)"

2. 确保limitedItems是基于计算属性items的处理结果（比如分页、过滤），保证循环列表始终和选中面板一致。

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