时间戳

首页 > 解决方案 > 特定卡的 Vue 覆盖

vue.js - 特定卡的 Vue 覆盖

问题描述

我将 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.jsvuetify.js

解决方案

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

推荐阅读