Changing a single image within a v-for loop of images in Vue

I am currently working with an array in Vue where I am using v-for to create 3 columns of information. Each column includes an image, and I would like to be able to change only the specific image that is being hovered over without affecting any others. How can I achieve this in Vue?

This is what my Vue code looks like:

<v-row
  align="center"
  justify="center"
>
  <v-col cols="4"
    v-for='(billingPlan, index) in billingPlans.basicPlans' 
    :key='billingPlan.id'
  >
    <v-img 
      :src="whichRose"
      @mouseenter="switchRose(index)"
    >
  </v-col>
</v-row>

I have been trying to target the image by its index, but so far I have not been successful.

Does anyone have any ideas on how I can solve this issue?

javascriptvue.jsvuejs2

Answer №1

Perhaps you could try something along these lines?

<v-row
  align="center"
  justify="center"
>
  <v-col cols="4"
    v-for='(billingPlan, index) in billingPlans.basicPlans' 
    :key='billingPlan.id'
  >
    <v-img 
      :src="billingPlan.hovered ? billingPlan.image2 : billingPlan.image1"
      @mouseenter="billingPlan.hovered = true"
    >
  </v-col>
</v-row>

If you want the image to change back when not hovered, you'll need to add additional functionality.

Note: In order for reactivity to work correctly, it's important that each billingPlan object has an initial property of hover set to false before the component is created. This ensures that the reactive src attribute will update properly when hover changes.

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

What is the most effective way to send URL strings to the server-side click handler in a jQuery loop using $.each method?

As I work with URL values in my client-side script, I aim to generate links that can transmit these URL values back to my server-side click handler upon clicking. The server-side code /logclick logs the timestamp and destination of the click for auditing p ...

javascriptjquerydynamic-linking

Tips for handling the user's logged-in status in NativeScript Vue

I had a question about managing user login/logout, so I tried the following approach: store.commit('load_state'); store.subscribe((mutations, state) => { ApplicationSettings.setString('store', JSON.stringify(state)); }); new Vue( ...

vue.jsnativescriptnativescript-vue

An argument error in IE 8 caused by an invalid procedure call

Is there a way to access the opener's class in a child window created using window.open? This works smoothly in W3C browsers, but fails in IE 8. On the other hand, I tested using an iframe and it seems to work fine across all browsers. The main goal o ...

javascriptinternet-explorergoogle-maps

I'm looking to configure @types for a third-party React JavaScript module in order to use it with TypeScript and bundle it with webpack. How can I accomplish this?

Imagine you have a third-party npm package called @foo that is all Javascript and has a module named bar. Within your TypeScript .tsx file, you want to use the React component @foo/bar/X. However, when you attempt to import X from '@foo/bar/X', y ...

javascripttypescriptnpmwebpack

A pause of 5 seconds between every request in Node.js

Need Help with Delays in Node.js Request Queue I am facing an issue with my code that involves looping through more than 500,000 records in a database and requesting information from another server. I have managed to write all the necessary functions, but ...

javascriptnode.jssetinterval

Is your $http request causing an XML parsing issue?

I'm attempting to utilize the $HTTP method from angularJS to access my restful web service. On entering my web service URL in the browser, I receive a result of APPLICATION/JSON type. {"id":20418,"content":"Hello, World!"} The URL for my web servic ...

javascriptjsonangularjsrest

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

Can someone explain why the console.log(items) command seems to be executing twice

Item.find() .then(function (items) { if (items.length === 0) { Item.insertMany(defaultItems) .then(function () { console.log("Successfully Saved"); }) .catch(function (err) { console.l ...

javascriptnode.jsmongodbexpressmongoose

The value of the comment box with the ID $(CommentBoxId) is not being captured

When a user enters data in the comment box and clicks the corresponding submit button, I am successfully passing id, CompanyId, WorkId, and CommentBoxId to the code behind to update the record. However, I am encountering an issue as I also want to pass the ...

javascriptjqueryasp.nethtml

What is the best way to delay JavaScript execution until after React has finished rendering?

Perhaps this is not the exact question you were expecting, but it did catch your attention :) The issue at hand revolves around the fact that most of the translations in my text do not update when the global language changes. Specifically, the translation ...

javascriptreactjsi18nextreact-i18next

Instructions on submitting a form containing multiple select lists using the enter key

After researching various threads, I have come across solutions using the JS onkeypress function to trigger actions with input fields. However, in my case, I need to implement this functionality with a form that consists of multiple select lists instead of ...

javascriptphphtmlforms

Error encountered while trying to implement sleep function in script

Good evening. I've been attempting to implement the sleep function from the system-sleep library, but my script keeps crashing. This is the code snippet I'm working with: page.html <html lang="en"> <head> <meta charset= ...

javascriptnode.js

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

javascriptangulartypescriptleaflet

Instruct Smarty to display the block exactly as it is

Struggling to inline some JavaScript code into the Smarty template files due to the {ldelim} {rdelim} markers. Is there a way to instruct Smarty to disregard the markup and just output it as is? Any similar approach like CDATA blocks in XML? Just demonstr ...

phpjavascriptsmarty

Node.js request body is not returning any data

UPDATE: @LawrenceCherone was able to solve the issue, it's (req, res, next) not (err, res, req) I'm in the process of building a MERN app (Mongo, Express, React, Node). I have some routes that are functioning well and fetching data from MongoDB. ...

javascriptnode.jsexpress

How is it possible to access a variable in a function that hasn't been declared until later?

While working on a Dialog component, I had an unexpected realization. export const alert = (content: string) => { const buttons = [<button onClick={()=>closeModal()}>ok</button>] // seems alright // const buttons = [<button onCli ...

javascriptreactjstypescriptfunctionclosures

Stop Antd Modal from automatically scrolling to the top

At the moment, I'm utilizing Ant Design (v4.22.8) and Next.js (v12.3.4) in my project. One issue I've encountered is with a Modal component that activates when a button is clicked. Instead of overlaying the current content on the screen, the moda ...

javascriptreactjsnext.js

The request's body in the PUT method is void

I seem to be having an issue with my PUT request. While all my other requests are functioning properly, the req.body appears to remain empty, causing this error message to occur: errmsg: "'$set' is empty. You must specify a field like so: ...

javascriptnode.jsmongodbexpressput

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

I'm a beginner in jQuery and JavaScript programming. While I've managed to use jQuery for my Ajax calls, I'm facing an issue that has me stumped. When making an Ajax call, I'm trying to return a complete HTML structure, specifically a ...

javascriptjqueryhtmlajax

Unlocking the potential of Vue within shadow dom environments

I am facing an issue with a shadow DOM that includes the root element and a Vue component. <template> <div class="container"> <div id="app"></div> </div> <script src="http://my-site.com/app/js/vue-compo ...

javascripthtmlvue.js