有条件地向子元素发送道具 Vue js

Question

我想用这个例子有条件地将 props 发送到 Quantity 组件。

<v-card
 class="mx-auto"
 max-width="344"
 shaped
 v-for="(item, index) in allItems || orderedItems"
 :key="index"
>

<Quantity {allItems ? :Items = item : :Ordered = item} />

</v-card>

如果 orderedItems 已激活，我想发送 Ordered 道具，如果 allItems 已激活，我想发送 Items。

Answer 1

改用v-bind：

<Quantity v-bind="quantityProps" />

然后为此创建一个方法：

quantityProps(item) {
  return {
    [this.allItems ? 'Items' : 'Ordered']: item
  }
}