Vue.js 特定卡的Vue覆盖

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

导出默认值{
数据：（）=>({
艺术：[
要求（“@/assets/art1.jpg”），
要求（“@/assets/art2.jpg”），
要求（“@/assets/art3.jpg”），
要求（“@/assets/art4.jpeg”），
要求（“@/assets/art5.jpg”），
要求（“@/assets/art6.jpg”），
要求（“@/assets/art7.jpg”），
要求（“@/assets/art8.jpg”）
],
绝对的：是的，
不透明度：1，
覆盖：假，
})
};

文件夹
{{艺术}

这是未经测试的，但类似的东西应该可以工作。。。基本上重新构造数据。现在您有了一个

覆盖

布尔数据。无论何时将其设置为

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>

然后在您的

方法中

：

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

---

这是未经测试的，但像这样的东西应该会起作用。。。基本上重新构造数据。现在您有了一个

覆盖

布尔数据。无论何时将其设置为

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>

然后在您的

方法中

：

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

---

我会制作一个新的组件来保存v卡，这样每个组件都有自己的覆盖数据属性。但是，将所有内容与arts.length覆盖变量放在一个组件中同样有效

我会制作一个新的组件来容纳v卡，因此每个组件都有自己的覆盖数据属性。但是，将所有内容与arts.length叠加变量集成在一个组件中同样有效

谢谢！我不明白这个.arts.map（（a）=>a.overlay=false）的含义；一点地图做什么？如果您不介意解释great to hear，

map

基本上在数组上循环，并允许您设置一个值。。。我这样做是因为我们希望在切换单击的覆盖之前，将所有其他覆盖设置为

false

。你可以在这里玩得更多：它成功了，谢谢！我不明白这个.arts.map（（a）=>a.overlay=false）的含义；一点地图做什么？如果您不介意解释great to hear，

map

基本上在数组上循环，并允许您设置一个值。。。我这样做是因为我们希望在切换单击的覆盖之前，将所有其他覆盖设置为

false

。您可以在此处更多地使用它：