Vue.js mismo valor que se pasa al método

Estoy usando v-for para bucle a través de un conjunto de objetos. La lista tiene una entrada de archivo dentro. En el evento de cambio de la entrada de archivo, estoy llamando un método con un parámetro. El problema es que el valor del parámetro no está cambiando el mismo valor se está pasando en todas las entradas del archivo.

                                            
                                            @{{ item.id }}
                                        

Este es el método.

handleFileUpload(i) {
    console.log(i);
    }

A continuación se presentan los datos.

ailment_details_form: {
            details: '',
            items: [
                { id: 1, text: "Item 1" },
                { id: 2, text: "Item 2" },
                { id: 3, text: "Item 3" }],
            files: [],
            urls: []
        }

Aquí. item.id dentro handleFileUpload() método siempre se muestra como 1. Donde está dentro label Está mostrando correctamente. Por favor, ayuda.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por bitcraftsman

2 Respuestas:

• El problema que estás experimentando se debe a cómo se está pasando el parámetro item.id al método handleFileUpload en Vue.js. Cuando usas v-on:change="handleFileUpload(item.id)", estás evaluando item.id en ese momento y pasando un valor fijo a la función. Para que el parámetro pase correctamente el valor a la función y se actualice correctamente para cada iteración del bucle, puedes usar una función anónima en el v-on:change para pasar el valor dinámicamente.

  Aquí te muestro cómo puedes modificar tu código para solucionar este problema:

  html
  
      
      @{{ item.id }}
  
  

  Al usar () => handleFileUpload(item.id), estás pasando una función anónima que ejecutará handleFileUpload con el valor actual de item.id en cada iteración del bucle.

  Con este cambio, el parámetro i en el método handleFileUpload debería reflejar correctamente el valor de item.id para cada elemento en la lista.

  Espero que esta solución resuelva tu problema. Si necesitas más ayuda, por favor házmelo saber.

  Respondida el Dec 19, 2020 a las 18:27 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás experimentando se debe a la forma en que funciona el enlace de datos en Vue.js. Cuando utilizas v-for para iterar sobre una matriz, Vue crea una nueva instancia del componente para cada elemento de la matriz. Esto significa que cada instancia del componente tiene su propia copia de los datos, y cualquier cambio realizado en los datos dentro de un componente no se reflejará en los otros componentes.

  En tu caso, cuando llamas a handleFileUpload(item.id), estás pasando el mismo objeto item a cada instancia del componente. Esto significa que cada instancia del componente está recibiendo el mismo valor de item.id, que es 1.

  Para resolver este problema, puedes utilizar una función de flecha en el evento v-on:change. Las funciones de flecha tienen acceso al alcance léxico de su función padre, por lo que puedes utilizarlas para acceder al valor correcto de item.id para cada instancia del componente.

  Aquí tienes el código actualizado:

  
  
    
    @{{ item.id }}
  
  

  En este código, estamos pasando una función de flecha al evento v-on:change. La función de flecha tiene acceso al valor correcto de item.id para la instancia actual del componente, y lo pasa al método handleFileUpload.

  Respondida el Dec 19, 2020 a las 18:38 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---