javascript - 为什么我的对话框彼此堆叠在一起？ (验证)

Question

所以，我正在学习 Vuetify 并正在实现卡片和对话框。我只是按照中的示例进行操作Vuetify 文档。我试图通过我的实现来完成什么:

• 用户可以单击卡片打开一个对话框，其中显示更多信息有关该项目的信息。

• 用户可以点击“添加到购物车”，卡片将加载大约 3 秒秒

问题#1:列表中所有项目的对话框似乎同时打开，这导致它们彼此堆叠。

问题 #2:针对所单击的项目打开的对话框是错误的。我假设如果问题 #1 得到解决，这个问题就会得到解决。

问题 #3:当我单击“添加到购物车”按钮时，它会进行加载并打开该项目的对话框。

问题#1:如何才能只打开一个对话框并且它是正确的对话框？

问题 #2:如何避免在单击“添加到购物车”时打开对话框？

我正在没有激活器的情况下打开对话框；类似于 Vuetify 文档中的第一个示例。我也尝试过与激活器进行对话，但仍然存在相同的问题。

CODEPEN:https://codepen.io/chataolauj/pen/RwwYxBg?editors=1010

这是 HTML:

<v-app id="app">
  <v-container>
    <v-row>
      <v-col cols="4" height="100%" v-for="(food, index) in foods" :item="food" :key="index">
        <v-card class="mx-auto" :loading="loading && current_index === index" @click.stop="dialog = true">
          <v-img height="200px" :src="food.imgURL"></v-img>
          <v-card-title class="mb-2 pb-0">{{food.name}}</v-card-title>
          <v-card-subtitle>{{food.type}}</v-card-subtitle>
          <v-card-actions>
            <v-btn color="green" text @click="addToCart(index)">Add to Cart</v-btn>
          </v-card-actions>
        </v-card>
        <v-dialog v-model="dialog" max-width="50%">
          <v-card>
            <v-row no-gutters class="pa-4">
              <v-col cols="6" max-width="25%">
                <v-img :src="food.imgURL" class="pa-0" height=175></v-img>
              </v-col>
              <v-col cols="6" max-width="25%" class="pl-2 d-flex flex-column">
                <v-card-title class="pa-0">{{food.name}}</v-card-title>
                <v-subtitle>{{food.type}}</v-subtitle>
                <v-text>{{food.description}}</v-text>
              </v-col>
            </v-row>
          </v-card>
        </v-dialog>
      </v-col>
    </v-row>
  <v-container>
</v-app>

这是 JavaScript:

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      loading: false,
      current_index: null,
      dialog: false,
      foods: [
        {
          type: 'Fruit', 
          name: 'Apple',
          imgURL: 'https://placebeard.it/400x400',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
        },
        {
          type: 'Fast Food', 
          name: 'Pizza',
          imgURL: 'https://placebeard.it/400x400',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna fringilla. Sem viverra aliquet eget sit amet tellus. Porta lorem mollis aliquam ut porttitor leo. Augue eget arcu dictum varius duis at consectetur.'
        },
        {
          type: 'Meat',
          name: 'Steak',
          imgURL: 'https://placebeard.it/400x400',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus faucibus scelerisque. Diam maecenas sed enim ut sem viverra aliquet eget. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Quam id leo in vitae turpis massa.'
        }
      ]
    }
  },
  methods: {
    addToCart(index) {
      this.loading = true;
      this.current_index = index;

      setTimeout(() => (this.loading = false), 2000);
    }
  }
});

Answer 1

因此，我解决问题 #1 的方法是创建一个对象，并根据数组中的项目数使用属性填充该对象。

data() {
    return {
      loading: false,
      current_index: null,
      previousItem: null,
      dialog: {}, //object to be populated with properties
      foods: [ /* some objects*/ ]
    }
}

我在 created() 生命周期 Hook 中向对象添加了属性。

created() {
  for(let i = 0; i < this.foods.length; i++) {
    this.dialog['dialog_' + i] = false;
  }
}

添加到对话框对象中的这些不同属性将是基于卡片索引的 v 模型。例如，第一张卡的 v 模型将为 dialog_0。这样，只有被单击的卡片的对话框才会打开，而不是每张卡片的对话框。

<v-col v-for="(food, index) in foods" :item="food" :key="index">
   <v-dialog v-model="dialog['dialog_' + index]"> //v-model
      <template v-slot:activator="{ on: {click} }"> //clicking the card is the activator for the dialog
         <v-card> /*stuff goes here */ </v-card>
      </template>
   </v-dialog>
</v-col>

至于我如何解决问题#3，我只是按照DjSh的回答将.stop添加到@click，所以它将是 @click.stop="addToCart(index)"