forms - 使用 x-if 跳过 alpine.js 中的循环

Question

我用这个循环

<form action="/" method="POST">
    <template x-for="(deck, index) in $store.cart.decks">
      <div x-show="$store.cart.total(index) > 0">
        <div><span x-text="$store.cart.total(index)"></span> Karten</div>
        <div x-text="deck.price"></div> €
        <input :name="'deck[' + index + '][name]'" :value="$store.cart.decks[index].name">
      </div>
    </template>
</form>

这工作正常并显示我的购物车中的所有项目并隐藏那些总共为 0 的项目。
但这只会将 display:none 上的项目设置为 0 ，这将 仍然传输POST请求中的数据 .

我尝试使用 x-if而不是 x-show但这仅在 tempate 标签上允许。

我试图在模板标签上添加 x-if:

<template x-show="$store.cart.total(index) > 0" ...

这会导致错误，因为 index在那一点上没有设置

我试图添加另一个 <template>标记在现有模板中，然后是变量 index和 deck在第二个内不再可用

如何防止在我的 POST 请求中计算零购物车项目？

Answer 1

我认为类似以下内容会起作用，请注意 div两者内template元素。

<template x-for="(deck, index) in $store.cart.decks">
  <div>
    <template x-if="$store.cart.total(index)">
      <div>
        <!-- rest of the content -->
      </div>
    </template>
  </div>
</template>