VueJS avoids displaying a specific data in every iteration of a v-for loop

Presented below is the code that I have managed to successfully get working:

      <span v-for="(item, index) in storedUserItems">
        <template v-if="item.strength">
        <img @mouseover="itemInfo(item, index)" style="padding: 5px;background: black;border-radius: 5px;margin-top: 15px;margin-right: 15px;" :src="require('../assets/items/strength/'+item.img)">
        <span>{{itemPower}}</span>
        </template>
      </span>

The issue at hand arises when hovering the mouse over the img, causing all item powers to be displayed alongside them. The goal is to only display the specific item info on which the mouse hovers. How can this problem be resolved?

Solution Approach:

methods: {
  itemInfo(item, index) {
    this.itemPower = item.power;
  },
javascriptvue.jsvuejs2

Answer №1

Consider implementing conditional rendering in the following way :

  <span v-if="item.power==itemPower">{{itemPower}}</span>

Alternatively, you can include a property named selectedIndex in your data object and update it as shown below :

 methods: {
    itemInfo(item, index) {
      this.itemPower = item.power;
      this.selectedIndex=index;
     },

Then adjust your template like this :

  <span v-if="selectedIndex==index">{{itemPower}}</span>

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 steps do I need to take to generate a terrain similar to this using Three.js?

Trying to construct a terrain based on a heightmap with an enclosed bottom layer. Refer to this example for clarification: The current function for generating the terrain is as follows: var img = document.getElementById("landscape-image"); var numSegment ...

javascriptthree.js

The incorrect value of variable V is being passed to the doSomethingWithData(v) function. This could lead to unexpected results

const Greetings = () => { const [num, setNum] = React.useState(1); React.useEffect(() => { setTimeout(async () => { await setNum(2); processData(num) }, 3000) }, []); retur ...

javascriptreactjs

Issues with AJAX formData functionality

I'm having difficulties with the formData in my Ajax calls. I have searched extensively for solutions and tried various approaches, including using getElementById, but nothing seems to work. The form in question has an id of add-lang-form: <form ...

javascriptphpjqueryajax

How can we effectively manage form handling in Vue.js with Vuex in a controlled and rational manner?

I'm faced with a challenge of submitting a comprehensive form on a single page. <container> <formA> <formB> <formC> <submitButton> <container> This is how it appears, and I have a storage system in place t ...

formsvue.jsvuex

The error in React syntax doesn't appear to be visible in CodePen

Currently, I am diving into the React Tutorial for creating a tic-tac-toe game. If you'd like to take a look at my code on Codepen, feel free to click here. Upon reviewing my code, I noticed a bug at line 21 where there is a missing comma after ' ...

javascriptreactjscodepen

Error: The reference property 'refs' is undefined and cannot be read - Next.js and React Application

Here is my code for the index page file, located at /pages/index.js import { showFlyout, Flyout } from '../components/flyout' export default class Home extends React.Component { constructor(props) { super(props); this.state = {}; } ...

javascriptreactjsnext.jsreact-dom

JSP checkbox functionality

I have been attempting to solve this issue since last night, but I am struggling and need some help. There are two pages, named name.jsp and roll.jsp. In name.jsp, there are two input text boxes and one checkbox. After entering data in the text boxes and ...

javascriptjqueryajaxjsp

Can two writable stores in Svelte be set up to subscribe to each other simultaneously?

There is a unique scenario where two objects share data, yet have different structures. For instance, the 'Team' object has the team ID as its key. The 'Team' object includes 'name' and 'users' objects as its values ...

javascriptsveltesvelte-store

Why is it important to refuse cookies on websites?

On my website, I have a button for users to decline cookies. If they choose to decline cookies, Google Analytics will not be functional on the site due to the code that has been set up. I have noticed that some other websites offer options in their cookie ...

javascriptjqueryhtmlcookiesweb

Guide on how to copy data from an excel spreadsheet to a table and save it in the state using React

I have a React table where I need to paste values from an Excel sheet and store them in a state. I've attempted using both onPaste and onInput events, but only the last value is being stored in the state. function App() { // State setup } // Event ...

javascriptreactjseventsevent-handling

saving data in an array using JavaScript

I have a requirement to store values into an array in HTML that are generated by a random number generator in Python as {{player.a1s1}}. I have successfully handled this part. Essentially, every time the button "mm1a" is clicked, a new button will be displ ...

javascriptjqueryarrays

Having a problem with the xmlhttprequest, not confident if it is being called correctly

I encountered a problem with the code I have where a user selects a sales center and it should trigger a currency change. Both selections are dropdowns, but when I choose a sales center, I receive an error saying ReferenceError: makeRequest is not define ...

javascriptajax

JavaScript: Obtaining a Distinct Identifier for Various Replicated Entries

Imagine we have an object: var db = [ {Id: "201" , Player: "Jon",price: "3.99", loc: "NJ" }, {Id: "202", Player: "Sam",price: "4.22", loc: "PA" }, {Id: "203" ,Player: "Sam",price: "4.22", loc: "NY" }, {Id: "204", Player: ...

javascriptobjectduplicatesdistinct-values

Utilizing class references within a method

I have been developing a script that is designed to dynamically load content into multiple predefined DIVs located in the topbar section of my website. Within the Topbar Object, there is an object called Ribbon which contains functions for manipulating on ...

javascriptajaxthis

Retrieve both the keys and values from a deeply nested JSON object

My goal is to retrieve JSON data with a specific structure as shown below: {"Points": {"90": {"0": {"name": "John Phillip", "slug": "john"}, {"1&q ...

javascriptjson

Tips for segmenting text into pages according to the dimensions of the viewport and the font style

Here's a puzzle for you. I have a horizontal slider that loads pages via Ajax, with pre-loading features to maintain smooth performance. Similar to Facebook Billboarding but with a slight twist. By determining the viewport size, I calculate boxSizeX a ...

javascriptjquerycssfonts

Issue with material-ui-dropzone, the DropzoneAreaBase component not displaying the preview of the uploaded files

Has anyone encountered issues with the DropzoneAreaBase component from the material-ui-dropzone library? I am having trouble getting it to display added file previews. Any insights into why this might be happening? <DropzoneAreaBase onAdd={(fileObjs) ...

javascriptreactjsfile-uploadmaterial-ui

The useSelector value remains undefined within the handleSubmit button in a React component

Once a user fills out and submits the form, the action is triggered to call the API. Upon returning the postId, it is stored in the reducer. The main React component then utilizes useSelector to retrieve the latest state for the postId. However, when attem ...

javascriptreactjsreduxredux-thunk

Ways to Determine the Height and Width of an Image Once it has been Adjusted for a View

Is there a way to retrieve the height and width of an image after it has been resized for a view? I have images that may vary in original dimensions, but users can resize them as needed. For example, this code from the console gives the client height: do ...

javascriptselenium

The pure JavaScript function for changing the background color in CSS is not functioning properly

I'm having trouble understanding why the color does not change after clicking. Can anyone explain? function butt(color) { if(document.getElementById("bt").style.backgroundColor=="green"){ document.getElementById("bt").style.backgrou ...

javascripthtmlcss