Question

我将Vue与Vuetify配合使用，并且使用了for循环来渲染8种不同的卡。每张卡都有自己的叠加层，单击时会显示自己的图像，但是当我单击一张卡时，所有叠加层都会被抵消，而不是仅针对特定卡的叠加层。我应该怎么做呢？我需要为每张卡添加一个ID吗？

<script>
export default {
  data: () => ({
    arts: [
      require("@/assets/art1.jpg"),
      require("@/assets/art2.jpg"),
      require("@/assets/art3.jpg"),
      require("@/assets/art4.jpeg"),
      require("@/assets/art5.jpg"),
      require("@/assets/art6.jpg"),
      require("@/assets/art7.jpg"),
      require("@/assets/art8.jpg")
    ],
    absolute: true,
    opacity: 1,
    overlay: false,
  })
};
</script>

<template>
  <div style="width: 100%; height: 100%">
    <v-container fluid style="height:100%; background-color:#fc8276; width:25%; float:left"></v-container>
    <v-container style=" height: 100%; width: 75%; float:right" fluid>
      <h1>Portfolio</h1>
      <v-card
        v-for="art in arts"
        class="ma-5"
        v-bind:key="art"
        style="width: 15em; height: 15em; display:inline-flex"
      >
        <v-img :src="art" v-on:click="overlay=true"></v-img>
        <v-overlay :absolute="absolute" :opacity="opacity" :value="overlay">
            {{art}}
        </v-overlay>
      </v-card>
    </v-container>
  </div>
</template>

Answer 1

这未经测试，但是类似的东西应该可以工作……基本上可以对数据进行一些重组。现在，您有一个 overlay布尔数据。每当您将其设置为true时，就将所有都使用相同的布尔值将其设置为true ...在您的情况下，所有可覆盖对象同样的布尔值。

我也建议您将样式移入CSS类，这将使这种方式更具可读性...

您需要将HTML更新为此：

<template>
  <div style="width: 100%; height: 100%">
    <v-container fluid style="height:100%; background-color:#fc8276; width:25%; float:left"></v-container>
    <v-container style=" height: 100%; width: 75%; float:right" fluid>
      <h1>Portfolio</h1>
      <v-card
        v-for="(art, index) in arts"
        class="ma-5"
        v-bind:key="index"
        style="width: 15em; height: 15em; display:inline-flex"
      >
        <v-img :src="art" v-on:click="showOverlay(art, index)"></v-img>
        <v-overlay :absolute="absolute" :opacity="opacity" :value="art.overlay">
            {{art.asset}}
        </v-overlay>
      </v-card>
    </v-container>
  </div>
</template>

然后稍微更改一下数据：

data: () => ({
    arts: [
      { asset: require("@/assets/art1.jpg"), overlay: false },
      { asset: require("@/assets/art2.jpg"), overlay: false },
      { asset: require("@/assets/art3.jpg"), overlay: false },
      { asset: require("@/assets/art4.jpeg"), overlay: false },
      { asset: require("@/assets/art5.jpg"), overlay: false },
      { asset: require("@/assets/art6.jpg"), overlay: false },
      { asset: require("@/assets/art7.jpg"), overlay: false },
      { asset: require("@/assets/art8.jpg"), overlay: false }
    ],
    absolute: true,
    opacity: 1,
  })

然后在您的methods中

methods: {
  showOverlay(art, index) {
    this.arts.map((a) => a.overlay = false);
    this.arts[index].overlay = true;
  }
}

Answer 2

我将制作一个包含v卡的新组件，因此每个组件都有其自己的覆盖数据属性。但是将所有内容与arts.length覆盖变量整合到一个组件中也可以

特定卡片的Vue重叠广告

2 个答案: