Vue 更新 v-for 中的所有组件

Question

在我的组件中，v-for 显示从 firestore 带来的 allItems 数组中的所有项目。

将末尾添加为“添加”按钮，以便用户可以将项目添加到他的购物篮中，因为我在商店中设置了一个数组，用于添加项目。

我在该按钮上有一个v-if，当单击itemAdded 为真的特定项目时，会显示消息已添加项目。这样 Item added 消息可以显示并且按钮消失。

但是当我点击按钮时，所有项目都会显示消息Item added。

我只希望特定项目显示消息。谁能为此提出解决方案。

组件

<v-col cols="12" sm="6" md="3" v-for="(item) in allItems" :key="item.ITEM_NAME">
  <v-card
          class="d-flex flex-row disableScroll"
          flat
          tile
          style="margin-top: 16px; padding: 2px; overflow-x: auto;">
    <v-card max-width="250">
      <v-img
              class="white--text align-end"
              height="200px"
              src="../../assets/img/category_blank.jpg"
      >
        <v-card-title>{{item.ITEM_NAME}}</v-card-title>
      </v-img>

      <v-card-subtitle class="pb-0">{{item.ITEM_DESC}}</v-card-subtitle>

      <v-card-actions>
        <v-card-text>Rs {{item.ITEM_PRICE}}</v-card-text>
        <v-btn v-if="item.ITEM_STOCK && !itemAdded" style="margin-left: auto" color="orange" text @click="addItem(item)">
          Add
        </v-btn>
        <p v-else-if="itemAdded">Item Added</p>
        <p v-else> Out of Stock</p>
      </v-card-actions>
    </v-card>
  </v-card>
  </v-col>

脚本

<script>
import {db, getStoreID} from "@/main";

export default {
  data() {
    return {
      allItems: [],
      orderItems: {},
      itemAdded: false,
    }
  },
  name: "HomeCategories",
  props: ["category"],
  created() {
    let docID = getStoreID();
    db.collection("STORES")
        .doc(docID)
        .collection("ITEMS")
        .doc("DATA")
        .collection(this.$props.category).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            this.allItems.push(doc.data())
          })
    })
  },

  methods: {
     addItem(item){
      this.orderItems.name = item.ITEM_NAME,
    this.orderItems.price =  item.ITEM_PRICE,
    this.orderItems.isAvail =  item.ITEM_AVAILABLE,
    this.orderItems.imgUrl = item.ITEM_IMG_URL,
    this.orderItems.quantity = 1,
   this.itemAdded = true
   this.$store.commit("ADD_ITEM_TO_BASKET", this.orderItems);
    }
  }

};
</script>

Answer 1

当您检查条件而不是 itemAdded 作为布尔值时，将其设为数组

像这样在methods 中创建一个新函数

isItemAdded(value) {
    if (this.itemAdded.includes(value)) {
          return true;
    }
    
    return false;
}

现在，在 addItem 函数中，像这样将值添加到数组 this.itemAdded

this.itemAdded.push(item);

HTML 的变化

<v-btn v-if="item.ITEM_STOCK && !isItemAdded(item)" style="margin-left: auto" 
color="orange" text @click="addItem(item)">
              Add
            </v-btn>
            <p v-else-if="isItemAdded(item)">Item Added</p>

你们都准备好了。干杯

Answer 2

您的itemAdded 值是布尔值，因此它只有两个值：真和假，但是您将它用于每个 项，因此如果您更改它，那么您将针对每个项进行更改。

1. 只能为 1 项添加此选项。

你应该更精确。例如，您可以将项目名称保留在itemAdded，这样您就可以始终知道添加了什么项目。在这种情况下，只有 一个 项可以具有此标志。

1. 如果每个项目都可以添加一次，则使用此选项。

另一种选择是将itemAdded 视为数组，因此每个项目都可以添加（一次）。

首先，将组件数据更改为 itemsAdded 为数组：

...
data() {
    return {
      allItems: [],
      orderItems: {},
      itemAdded: [], // <--- here we change itemAdded to be array
    }
  },
...

现在我们需要检查 itemAdded 不是布尔值，而是布尔值数组：

...
<v-btn v-if="item.ITEM_STOCK && !itemAdded[item.ITEM_NAME]"
...
<p v-else-if="itemAdded[item.ITEM_NAME]">Item Added</p>
...

最后我们在按钮点击时更改项目的标志：

...
methods: {
  addItem(item){
    ...
    this.itemAdded[item.ITEM_NAME] = true; // <--- see array here?
    ...

如果你需要，我可以添加一些代码示例。