在HTML标签中使用三元操作符

Question

所以我使用vue.js框架，我试图创建一个列表，从2个列表对象更新。我想让list cards的边框根据某个特定元素是否为真而改变

这是我的名片

<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="
selectedDashboard === 'germany'
? itemsDe.Dringlichkeit
? 'border-red-600'
: 'border-green-500'
: itemAt.Dringlichkeit
? 'border-red-600'
: 'border-green-500'
"
>

下面是所讨论对象的片段

methods: {
loadTestData() {
this.itemsDe = [
{
AuftragsNr: 1,
PalettenNr: 101,
Palettenanzahl: 5,
Lagerplatz: "A1",
Dringlichkeit: true,
},

this.itemsAt = [
{
AuftragsNr: 1,
PalettenNr: 103,
Palettenanzahl: 6,
Lagerplatz: "A2",
Dringlichkeit: false,
},

这是我的计算结果，如果它有任何相关性

computed: {
maxHeight() {
return 0.9 * window.innerHeight;
},
items() {
if (this.selectedDashboard === "germany") {
return this.itemsDe;
} else if (this.selectedDashboard === "austria") {
return this.itemsAt;
} else {
return [];
}
},
},

目标是使列表中的卡片根据各自列表中的值dringlichkeit改变颜色这在以前我们仍然只在一个列表中工作，但由于我无法改变我想要它的方式

组合框正在工作，因为我可以看到它与其他值对于excample

<div class="text-center mx-auto">
<p class="text-2xl font-bold dark:text-white">Aufträge im Verzug:</p>
<p class="text-3xl font-bold">
{{
selectedDashboard === "germany"
? itemsDe.filter((item) => item.Dringlichkeit === true).length
: itemsAt.filter((item) => item.Dringlichkeit === true).length
}}
</p>
</div>

在这里我可以访问itemsDe和itmsAt，但不能在三进制?

:ng-class="{
selectedDashboard === 'germany'?
itemsDe.filter((item) =>!item.Dringlichkeit === true) ?
'border-red-600' : 'border-green-500':
itemsDe.filter((item) =>!item.Dringlichkeit === true)?
'border-red-600':'border-green-500'
}"

同一事物的不同表达，但在这一点上，我只是在黑暗中拍摄。

我得到的是一个意外的标记在===或缺失的标识符

Answer 1

当模板表达式用花括号括起来时，Vue将假定内容是一个对象:

:ng-class="{
prop: value
}"

但是您将表达式放入对象大括号中，这是无效的语法。去掉大括号，就可以了。

(不知道为什么你使用:ng-class而不是:class，这不是Angular吗?)

我个人不会将这种大小的三元表达式放入模板中，而是也会使用computed属性。

让我补充一下，!item.Dringlichkeit === true和!item.Dringlichkeit是一样的。

下面是一个片段，也许对你有帮助:

new Vue({
el: '#app',
data() {
return {
selectedDashboard: 'germany',
itemsDe: [{Dringlichkeit: true}],
itemsAt: [{Dringlichkeit: false}],
};
},
})

.panel{
width: 40px;
height: 40px;
background: grey;
}
.border-red-600{
border: 2px solid red;
}
.border-green-500{
border: 2px solid green;
}

<div id="app">
<div 
class="panel" 
:class="(selectedDashboard === 'germany' ? itemsDe : itemsAt).some(item => !item.Dringlichkeit) ? 'border-green-500' : 'border-red-600'"
></div>
<div>
<label>
<input type=radio value=austria v-model=selectedDashboard />austria (not dringlich)</label>
<label><input type=radio value=germany v-model=selectedDashboard />germany (dringlich)</label>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>