特定卡的 Vue 覆盖答案

【问题标题】：Vue Overlay for specific card特定卡的 Vue 覆盖
【发布时间】：2020-10-03 06:08:29
【问题描述】：

我将 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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案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;
  }
}

【讨论】：

成功了，谢谢！我不明白 this.arts.map((a) => a.overlay = false);少量。地图有什么作用？如果你不介意解释
很高兴听到，map 基本上循环遍历数组并允许您设置一个值...我这样做是因为我们想在切换之前将所有其他叠加层设置为 false点击的那个。你可以在这里玩更多：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

我会制作一个新的组件来保存 v-card，所以每个组件都有自己的覆盖数据属性。但是将所有这些都放在一个带有arts.length覆盖变量的组件中也可以

【讨论】：