Question

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

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

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

但是当我单击按钮时，所有项目都会显示消息已添加项目。

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

组件

<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值为布尔值，因此只有2个值：true和false，但是您将其用于每个项，因此，如果更改它，则对每个项都进行更改项目。

此选项只能添加1个。

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

如果每个项目只能添加一次，则此选项。

另一种选择是将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?
    ...

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

Answer 2

当您检查条件而不是布尔值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>

您都准备好了。干杯

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

2 个答案: