What is the best way to develop a unique animation for every v-card?

Is there a way to customize each animation so that it is specific to the selected v-card? Right now, when one card is clicked, all of them play the same animation.

data: () => ({
    show: true,
    images: [
      {url:require('@/assets/london.png'), title: 'hello'},
      {url:require('@/assets/london.png')},
      {url:require('@/assets/london.png')},
      
    ],
    
<v-card  class="ms-8 mb-5" v-for="image in images" v-bind:key="image" width="300" height="300" style="display: inline-flex" elevation="15" v-on:click="show = !show">
      <v-img v-if="show" height="300" width="300"
             :src="image.url">
             </v-img>
    </v-card>

Answer №1

Having only one show variable means that if it is true, all images will be visible because they are all using the same variable. To solve this issue, you should create a separate show variable for each object. Alternatively, you can create a component such as `image` and pass show to it as a props. Each image will then be an instance of the component with unique properties.

data: () => ({
    show: true,
    images: [
      {url:require('@/assets/london.png'), title: 'hello', show:true},
      {url:require('@/assets/london.png'),show:true},
      {url:require('@/assets/london.png'), show:true},

    ],

<v-card  class="ms-8 mb-5" v-for="image in images" v-bind:key="image" width="300" height="300" style="display: inline-flex" elevation="15" v-on:click="image.show = !image .show">
      <v-img v-if="image.show" height="300" width="300"
             :src="image.url">
             </v-img>
    </v-card>

This is pseudo-code so I cannot guarantee its functionality. Also, make sure to use a unique key, which is currently missing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refining an array with React's filter method

Currently, I am in the process of creating a To-Do Application using React. However, I have encountered a roadblock along the way. My struggle lies in mapping through items within an array and presenting them in an unordered list. I am attempting to util ...

Creating CSS animation for the most recent element that has been dynamically inserted using JavaScript and Vue.js

After adding a new div with Vue, I noticed that the opacity effect is being applied to the previous element instead of the newly added one. I want the effect to always appear on the latest element added at index 0. What could be causing this issue? Here i ...

Tips for utilizing node.io for HTML parsing with node.js?

Struggling to utilize node.io with node.js for parsing an HTML page stored as a string in a variable. Encountering difficulties passing the HTML string as an argument to my node.io job. Snippet from my node file nodeiotest.js: var nodeIOJob = requi ...

Explore innovative circular navigation with the wheelnav.js library - where SVG elements can dynamically change position but keep

I recently started exploring wheelnav.js for creating a unique navigation system. The Spreader feature caught my attention, particularly the 2nd example. However, when I implemented it, the text did not rotate as expected. I followed the code example pre ...

Is there any re-rendering optimization feature in Angular 2?

After experimenting with React for a few months, I've noticed that it doesn't just re-render a component entirely. Instead, it identifies the differences and updates only those parts. Does Angular 2 operate in a similar manner? Additionally, whe ...

Is it possible to mimic a ref attribute with jest/rtl within a functional component?

I'm currently facing an issue with a functional component that includes a helper function. function Component() { imgRef = useRef(null) function helperFunction(node, ref) { if (!ref || !ref.current) return; ...do someth ...

Refreshing and paginating data tables

I'm currently working on a basic CRUD data table and I have added a refresh function using AJAX to dynamically append HTML without reloading the page. Everything was working fine until I introduced pagination from Laravel. The issue now is that only t ...

Tips for connecting Vue data to a dropdown menu

While diving into Vue.js, I'm encountering a puzzling issue. Despite receiving data from the server (5 records), it's not populating the <select> element properly. Instead of multiple options, all I see is a single one displaying {{dept.DNa ...

Ways to prevent an empty iframe from triggering a load event upon injection

I have implemented a technique where I am using an empty frame to handle pseudo-asynchronous form submission. This involves referencing the frame's name attribute in the form's target attribute, allowing the form's action URI to resolve in t ...

Utilizing Rollup to Bundle a Collection of React Components

I am diving into the world of bundling as I update a compact React component library internally powered by Rollup. Current Status Currently, all components are bundled into a single index.js file. When I import one or more... import { Button, Input } fr ...

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

Difficulty arises when trying to add various text fields to a collection

Lately, I've been making modifications to the Meteor1.3+React Todos app to familiarize myself with the basics, and I must say, it's been a smooth ride so far. However, I have encountered a roadblock. I want to incorporate an additional text field ...

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

What is the best way to extract properties from JSON data using Javascript?

The json output provided is as follows: { "categories":[ "Physical support- 18-64 (RA)" ], "series":[ { "name":"Buckinghamshire", "data":[ 9088 ] }, { "name":"Lincolnshire", ...

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

Receiving multiple Firebase notifications on the web when the same application is open in multiple tabs

I have implemented firebase push notifications in Angular 7 using @angular/fire. However, I am facing an issue where I receive the same notification multiple times when my application is open in multiple tabs. receiveMessage() { this.angularFireMess ...

Tips for managing asynchronous code that invokes other asynchronous code in AngularJs

My factory utilizes indexedDB and a method called getRecipe that relies on this indexed db to fetch data. The issue arises because indexedDB returns its instance in an asynchronous call, and getRecipe is another method that also returns its value asynchro ...

Question about Looping Concept

var answer = ""; var correct = "4"; var question = "What is 2 * 2?"; for(i = 2; i < 5; i++) { answer = prompt(question, "0"); if (answer == correct) { alert("Your answer is correct!"); break; } } Before the break command is ...

Is it possible to implement a custom sign-in form for AWS Cognito?

Is it possible to replace the AWS Cognito hosted UI with a custom form in my Next.js app that utilizes AWS Cognito for authentication? import { Domain } from "@material-ui/icons"; import NextAuth from "next-auth"; import Providers fro ...