如何正确地将条件 class 添加到 Alpine JS x-for 模板？

Question

我正在尝试遍历循环并向 4 项以上的每个元素添加条件 class，以使用 tailwindcss 进行一些响应式样式设置。

之前我在循环中添加了一些其他的 class，效果很好：

<template x-for="(card, index ) in cards" :key="index">
    <div class="w-40 h-64"
         x-modal="card"
         :class="card.someOtherClass"
    >
        <div class="card-content" :id="'card-' + card.id">
        </div>
    </div>
</template>

但后来我需要添加条件语句来检查项目数是否超过 4。我查看了以下先前提出的问题：

这建议使用 { 'class-name': statement }，所以我做了以下操作：

<template x-for="(card, index ) in cards" :key="index">
    <div class="w-40 h-64"
         x-modal="card"
         :class="[card.someOtherClass,
             {'bg-green-500':  index > 3 },
          ]"
        >
        <div class="card-content" :id="'card-' + card.id">
        </div>
    </div>
</template>

但我将此 <div class="w-40 h-64 some-other-class [object Object]"> 传递给浏览器中的相关 HTML。如何从该对象中获取相关值？

Answer 1

要使 card.someOtherClass 成为变量属性名称，请将其括在方括号中。然后，将其设置为 true，以便始终将其添加到 class 列表中。

:class="{[card.someOtherClass]: true, 'bg-green-500': index > 3 }"

Answer 2

舔式更改样式示例：

<div x-data="{ show: false }">
      <button @click="show = !show" :class="{ 'active': show }">
    Toggle Button
    </button>
    
</div>

css:

.active {
  background-color: red;
}

https://codepen.io/bubnenkoff/pen/RwLoBXd

如何正确地将条件 class 添加到 Alpine JS x-for 模板？

How to properly add conditional class to Alpine JS x-for template?

javascript

laravel

alpine.js