The Vue component mistakenly saves the image to the incorrect location when the file @change event is triggered

I've encountered an issue with my image slider component. Users have the option to add an extra image to the end of the slider, but when there are multiple instances of the same slider component on a page, it always adds the image to the first component.

Check out this DEMO for more information: https://codesandbox.io/s/laughing-sid-71ox2?file=/src/components/ImageBlock.vue

Interestingly, I have other components that do not use the filereader API and they work as expected using the same approach.

javascriptvue.jsvuejs2filereader

Answer №1

It seems that you are encountering a duplicated id issue with the element extra_image. This is causing every click on the label + to trigger the first hidden file input.

To resolve this problem, you simply need to assign unique ids based on the block_index like so:

    <input
      :id="`extra_image_${block_index}`"
      class="hidden"
      name="extra_image"
      type="file"
      accept="image/*"
      @change="add_extra_image($event)"
    >
    <label :for="`extra_image_${block_index}`" class="extra_image">
      <span class="icon">+</span>
    </label>

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

JavaScript form button press tracker

Hello! I've been tackling a challenge involving a JavaScript function to count button clicks. The catch is, the button type is set to submit, causing the page to reload every time I click it. Below is the snippet of code that contains the problemati ...

phpjavascripthtmlbuttoncounter

extract all elements from an array nested within another array

I am having difficulty extracting data from an array file in PHP. I was able to read it and convert it into a PHP array, but now I want to display the stored information in a table, however, I keep getting incorrect values. How can I retrieve the informat ...

javascriptphphtmlarrays

WordPress: Issue with Dropdown onchange Event Not Triggering

I'm having trouble getting an event to fire when the dropdown value changes. Can anyone help me figure out where I might be going wrong? JavaScript code jQuery(document).ready(function($){ jQuery('#_ccounts select').on('change&apo ...

javascriptjquerywordpress

Changes made to one order's information can impact the information of another order

Currently, I am in the process of developing a unique shopping cart feature where users input a number and a corresponding product is added to a display list. Users have the ability to adjust both the price and quantity of the products, with the total pric ...

javascriptangulartypescript

Top tip for implementing toggle functionality with a specified duration in React.js

I am incorporating React into my web application. I understand how to implement the toggle logic - maintaining a boolean value in my state and updating it when I interact with the toggle trigger. However, I am struggling with how to add animation to this ...

javascriptjqueryreactjsnpm

Buttons in Laravel are shifting unexpectedly

There are three buttons available with different functions. <div class="form-group row mb-0"> <div class="col-md-6 offset-md-4"> <button type="submit" class="btn btn-primary"> {{ __('update') ...

javascriptphphtmllaravelbootstrap-4

Extracting Ajax responses and storing them as variables in JavaScript

Currently, I am developing a small PHP script and using the following code for an ajax query: var CODE = $('.code').val(); var CASE = $('.code').attr('case'); $.ajax({ type:'POST', ...

javascriptphpjqueryajax

Step-by-step guide to creating a transition effect when the input changes

I'm looking to add a unique effect to my dropdown menu My goal is to create an effect in which the placeholder moves up and the new value seamlessly takes its place, using JS, jQuery, CSS, and HTML. View before transition View after transition ...

javascriptjqueryhtmlcss

Why is Selectpicker failing to display JSON data with vue js?

After running $('.selectpicker').selectpicker('refresh'); in the console, I noticed that it is loading. Where exactly should I insert this code? This is my HTML code: <form action="" class="form-inline" onsubmit="return false;" me ...

javascripthtmljsonvue.js

How can unicode (%u2014) be handled in JavaScript or C#/.NET?

While browsing through the vast expanse of the internet (specifically on a review site like Rotten Tomatoes), I stumbled upon %u2014. This particular string reminded me of something I once encountered in JavaScript. Although I can't quite recall if it ...

javascript.netunicodeescaping

Guide to transferring existing Mongoose Schema information to updated Mongoose Schema Data

In the schema I was using previously with Mongoose, it looked like this: social:{ instagram: String, facebook: String, whatsapp: String, } Now, my updated Mongoose Schema is structured differently: social:{ instagram: { dat ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to merge two fetch requests in order to gather the required data?

If I want to create a website with details about movies, one crucial aspect is getting information on genres. However, there's a challenge in the main data request where genres are represented by IDs. I need to execute another query that includes thes ...

javascriptvue.jsvuex

Tips for solving the "jQuery needs a window with a document" error when using import statements

I'm encountering the "jQuery requires a window with a document" error, and it appears that I require guidance similar to this solution: Error: jQuery requires a window with a document My quest is to find the precise syntax for addressing this using i ...

javascriptnode.jsnpmwebpack

JavaScript Object DeclarationCreating Objects in JavaScript

In this scenario, I have the following code snippet. Upon calling the constructor, an object is created. When updating the fields, modifications are made as shown below. It's important to note that direct modification of the Comment() function is not ...

javascriptnode.js

Implementing a Beveled Edge on a Shape using ThreeJS

I have put in a lot of effort to find the solution, but unfortunately I have not been successful so far. Currently, I am working on creating a shape using THREE.Shape, and I have the vertices data stored in a file. The shape appears to be straight without ...

javascriptthree.jsshapes

How can one effectively manage irregularly nested object/arrays within a Meteor framework?

Having difficulty finding a smart and effective method to manage nested arrays/objects with varying dimensions in nodeJS. These irregular arrays/objects can have 1, 2, 3, or more dimensions. For instance, consider these 2 different scenarios : Scenario 1 ...

javascriptarraysnode.jsmeteornested

Guide on creating a dark mode feature in Vue3 using props and local storage

I am facing an issue with implementing dark mode in my Vue files. When I click on the image in Navbar, it does not affect Content.vue. I have tried using props, but it doesn't work because I import Navbar in Content.vue and not the other way around. A ...

vue.jstemplatesvuejs3vue-propsdarkmode

Keep the final item in an array that shares the same attribute

I am working with an array const obj=[{fullCart: 5, halfCart: 4, smu: 3, stowage: 5, index: "FC-093"}, {fullCart: 5, halfCart: 4, smu: 8, stowage: 5, index: "FC-093"}, {fullCart: 5, halfCart: 4, smu: 0, stowage: 5, index: "FC-093 ...

javascriptarrays

Compatibility with IE9: Using jQuery to send an AJAX POST request

I'm currently facing an issue with making a POST request from my website to a server that is not on the same domain. The functionality is working seamlessly on Chrome, Firefox, and IE10+, but I need to ensure it works on IE9 as well. Below is the cod ...

javascriptjqueryajaxinternet-explorerinternet-explorer-9

How can I prevent clicks on child links using the :not() selector?

I am working on a script using JQuery where I want to add a click handler to a div while ignoring clicks on the children a tags within it. You can check out my attempt (which is not working as expected) on this JSFiddle link: http://jsfiddle.net/q15s25Lx/ ...

javascriptjquery