3

Estoy haciendo un código en vuejs, tengo un array bidimensional pero al momento de querer modificar un elemento de una fila y una columna en especifico, se me modifica todos los elementos de todas las filas pero solo de una columna, y yo quiero que se me modifique un elemento de una determinada fila y una determinada columna, pero solo funciona la parte de las columnas.

Este es mi código:

const srcOcupado ='https://via.placeholder.com/50x50.png?text=Si';
const srcDesocupado ='https://via.placeholder.com/50x50.png?text=No';

const vue = new Vue({

    el: "#app",
    data: {
        fila: [],
        columna: [],
        des: srcOcupado,
        oc: srcDesocupado,
        total: 0,
        datos: null,
        i: 0,
    },
    methods: {
        cambiar: function(index) {

            if (this.fila[1][1].imagen == srcDesocupado) {
                this.fila[1][1].imagen = srcOcupado;
                this.total = this.total + 30;
                console.log(this.fila[1][0]);

            } else {
                if (this.fila[1][1].imagen == srcOcupado) {
                    this.fila[1][1].imagen = srcDesocupado;
                    this.total = this.total - 30;
                    console.log(this.fila[1][0]);
                }
            }


        },
        tamañoFila: function() {
            var i = 0;
            while (i < 10) {
                this.datos = {
                    imagen: srcDesocupado
                }
                this.columna.push(this.datos);
                i++;
            }

        },
        tamañoColumna: function() {
            var i = 0;
            while (i < 4) {

                this.fila.push(this.columna);
                i++;
            }

        }
    },
    mounted() {
        this.tamañoFila();
        this.tamañoColumna();
    },
});
div div {
  display : block;
}
div div div {
  display : inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="(chairs,index) in fila">
        {{index}}
        <div v-for="(chair,index) in columna">
            {{index}}
            <a href="#" @click.prevent="cambiar(fila)"><img :src='columna[index].imagen' height="30px" width="30px"></a>
        </div>
    </div>
    <h2>total:{{total}}</h2>

</div>

5
  • Bienvenido a Stack Overflow en español! Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    Commented el 3 feb. 2020 a las 12:39
  • 2
    Hola Eder, he creado un snippet para poder ejecutar tu código en SOes. Además he sustituido las URL de las imágenes que usas por otras que se puedan ver en esta ejecución. Commented el 3 feb. 2020 a las 12:51
  • si es bidimensional y quieres cambiar un elemento no deberias pasar fila y columna? Commented el 3 feb. 2020 a las 13:02
  • que tal si lees esta pregunta con sus respuestas comprenderas mas de como funciona los arrays Commented el 4 feb. 2020 a las 15:45
  • Si alguna respuesta pudo resolver el problema puedes marcarla como correcta.
    – user13558
    Commented el 9 feb. 2020 a las 4:33

3 respuestas 3

3

Tienes dos problemas en tu código:

  • Siempre modificas la misma columna, a través de la segunda fila, en this.fila[1][1].imagen y nunca haces uso del parámetro fila.
  • Siempre muestras por cada fila los mismos valores de columna. Todas las filas contienen los elementos de this.columna (this.fila.push(this.columna);).

Lo que necesitas es organizar los datos en filas y columnas anidadas usando, por ejemplo, una matriz bidimensional, agregando todos los datos durante su creación:

for (let i = 0; i < 4; i++) {
  /* Por cada fila creamos una matriz anidada */
  this.filas.push([]);
  for (let j = 0; j < 10; j++) {
    /* Por cada columna de cada fila, agregamos el elemento deseado */
    this.filas[i].push({ imagen: srcDesocupado });
  }
}

Los datos se irán agregando a filas de forma que la primera dimensión tendrá un elemento por cada fila que contendrá un elemento por cada columna.

Aquí tienes un ejemplo de funcionamiento:

const srcOcupado ='https://via.placeholder.com/50x50.png?text=Si';
const srcDesocupado ='https://via.placeholder.com/50x50.png?text=No';

const vue = new Vue({
    el: "#app",
    data: {
        filas: [],
        des: srcOcupado,
        oc: srcDesocupado,
        total: 0,
    },
    methods: {
        cambiar: function(nfila, ncolumna) {
            if (this.filas[nfila][ncolumna].imagen == srcDesocupado) {
                this.filas[nfila][ncolumna].imagen = srcOcupado;
                this.total = this.total + 30;
                console.log(this.filas[nfila][ncolumna]);

            } else {
                if (this.filas[nfila][ncolumna].imagen == srcOcupado) {
                    this.filas[nfila][ncolumna].imagen = srcDesocupado;
                    this.total = this.total - 30;
                    console.log(this.filas[nfila][ncolumna]);
                }
            }
        },
        rellenarDatos: function() {
          for (let i = 0; i < 4; i++) {
            /* Por cada fila creamos una matriz anidada */
            this.filas.push([]);
            for (let j = 0; j < 10; j++) {
              /* Por cada columna de cada fila, agregamos el elemento deseado */
              this.filas[i].push({ imagen: srcDesocupado });
            }
          }
        },
    },
    mounted() {
        this.rellenarDatos();
    },
});
div div {
  display : block;
}
div div div {
  display : inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(columnas, nfila) in filas">
    {{nfila}}
    <div v-for="(columna, ncolumna) in columnas">
      {{ncolumna}}
      <a href="#" @click.prevent="cambiar(nfila, ncolumna)">
        <img :src='filas[nfila][ncolumna].imagen' height="30px" width="30px">
      </a>
    </div>
  </div>
  <h2>total: {{total}}</h2>
</div>

5
  • 3
    porque el new vue ahi en el medio?
    – gbianchi
    Commented el 3 feb. 2020 a las 15:07
  • Arreglado @gbianchi , gracias por el apunte. Lo hacía para que se propagara la aplicación de envolturas para mantener la reacción, pero veo que no es necesario. Commented el 3 feb. 2020 a las 15:45
  • Gracias @PabloLozano . Yo también tardé en responder porque tuve problemas al reorganizar el código para que pareciera más claro lo que eran filas y columnas, lo que me llevó a arrastrar en pruebas lo del new Vue() como solución intermedia x) ya está todo corregido. Commented el 3 feb. 2020 a las 15:52
  • @PabloLozano por qué borras tu respuesta? cada uno tiene un poquito qué complementar...
    – ffflabs
    Commented el 4 feb. 2020 a las 15:50
  • Un +1 a cada uno por vuestros respectivos aportes. Commented el 4 feb. 2020 a las 16:45
2

Veo un problema en cómo generas las filas: después de crear una, todas las demás son la misma instancia. Es como hacer lo siguiente:

let array1 = [0,0,1];
let array2 = array1;
let array3 = array1;

array2[0] = 3;
array3[1] = 5;
console.log(array1.toString());

Tienes que asegurarte de que cada objeto sea distinto:

const srcOcupado ='https://via.placeholder.com/50x50/0000FF/FFFFFF?text=S%20I';
const srcDesocupado ='https://via.placeholder.com/50x50.png?text=No';

const vue = new Vue({

    el: "#app",
    data: {
        asientos: [], //matriz bidimensional
        des: srcOcupado,
        oc: srcDesocupado,
        total: 0,
        datos: null,
        i: 0,
    },
    methods: {
    //para cambiar un asiento, necesitas las dos coordenadas
        cambiar: function(x,y) { 

            if (this.asientos[x][y].imagen == srcDesocupado) {
                this.asientos[x][y].imagen = srcOcupado;
                this.total = this.total + 30;
                console.log(this.asientos[x][y]);

            } else {
                if (this.asientos[x][y].imagen == srcOcupado) {
                    this.asientos[x][y].imagen = srcDesocupado;
                    this.total = this.total - 30;
                    console.log(this.asientos[x][y]);
                }
            }


        },
        //inicializa toda la matriz
        inicializar:function(x,y) {
            let i = 0;
            
            while (i < x) {
              let columna = [];
              while (columna.length < y) {
                let datos = {
                    imagen: srcDesocupado
                };
                columna.push(datos);
              }
              this.asientos.push(columna);
              i++;
            }

        }
    },
    mounted() {
        this.inicializar(4,10);
    },
});
div div {
  display : block;
}
div div div {
  display : inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="(fila,index1) in asientos">
        {{index1}}
        <div v-for="(chair,index2) in fila">
            {{index2}}
            <a href="#" @click.prevent="cambiar(index1,index2)"><img :src='fila[index2].imagen' height="30px" width="30px"></a>
        </div>
    </div>
    <h2>total:{{total}}</h2>

</div>

2

No entiendo las reglas del juego, pero desde ya te puedo señalar algunos errores de concepto que mucha gente pasa por alto. Oscar ya respondió y muy bien, pero qué más da, un poco de abundamiento no hace daño.

Antes del tema específico, un consejo que yo hubiera querido saber a los 30: es muy importante como se enmarca el problema. Las matrices no son intuitivas para el ser humano. Pensar en cambio que un cuadrado tiene filas, que cada fila tiene un conjunto de columnas, y que entre ambos definen una celda, eso sí es más intuitivo. Voy a explayarme más abajo.

Primero: en JS dos escalares son iguales entre sí cuando su valor es el mismo (Esto es un poco obvio), luego se cumple que

 4 == 4
'hola' == 'hola'

Y como todos los colegas sabemos, no sólo valen lo mismo sino que son idénticos

 4 === 4
'hola' === 'hola'

Ahora bien, para los objetos esto no es así

a=[1,2]
b=[1,2]
console.log(a==b)
> false

Dos objetos (no sólo {} sino matrices, sets, maps, weakmaps y demases) no son iguales a menos que sean el mismo objeto. Por lo mismo si alguien te dice:

Eeres igual igual a Brad Pitt, igual, pero es que igual, igual

Tú puedes pararlo y decir: "No soy igual igual igual".

Cuando los objetos se hacen iguales, pasa otro fenómeno:

b = a
console.log(b==a)
> true
console.log(b===a)
> true

Con ese flujo a y b son referencias al mismo objeto en memoria. Lo que se hace en A se manifesta en B

a[2]='tengo tres elementos'
console.log(b);
[1, 2, 'tengo tres elementos']

Y eso, que no pasa en los escalares, es lo que te tenía intrigado.

Yú generas 10 columnas y eso es todo lo que hay dando vueltas.

      tamañoFila: function() {
            var i = 0;
            while (i < 10) {
                this.datos = {
                    imagen: srcDesocupado
                }
                this.columna.push(this.datos);
                i++;
            }
        },

Cuando le metes esa referencia a cada fila, sólo estás haciendo que todas apunten a la misma, como si cada fila fuera un ventanal que mira hacia un mismo cilindro desde distintos ángulos.

        while (i < 4) {
            this.fila.push(this.columna);
            i++;
        }

Al hacer eso, cada fila gana acceso a la única colección de 10 columnas que anda dando vueltas. Por lo mismo cuando quieres cambiar la celda [1][1] estás cambiando la columna 1. Si sólo hay 10 columnas para compartir, sería ilógico que se modificara menos que el 10%. Esto se perpetúa aca

    <div v-for="(chair,index) in columna">
        {{index}}
        <a href="#" @click.prevent="cambiar(fila)"><img :src='columna[index].imagen' height="30px" width="30px"></a>
    </div>

En donde queda claro que si cambias el color de una columna, da igual desde donde, la cambias para todos columna[index].imagen tiene una sola coordenada.

Así pues, sería mejor si te generases una fábrica de columnas:

    getColumnas() {
      var columnas = [];
      for (var i = 0; i < 10; i++) {
        this.datos = {
          imagen: this.oc
        }
        columnas.push(this.datos);
      }
      return columnas;

    },
    tamañoColumna() {
      for (let i = 0; i < 4; i++) {
        this.fila.push(this.getColumnas());
      }
    }

Con esto cada fila recibe un set propio. Y es más, no se usa en absoluto una referencia global a las columnas. ¿Para qué? El componente debiera conocer sólo a las filas, y cada fila a sus columnas. Ley de Deméter. Con eso si necesitas hacer un cambio en las columnas (coio el cambio cosmético que hice) el componente no se entera.

Ahora, por qué no pasa lo mismo cuando usar this.datos?

      for (var i = 0; i < 10; i++) {
        this.datos = {
          imagen: this.oc
        }
        columnas.push(this.datos);
      }

Como dijimos antes, dos objetos no son el mismo a menos que sean el mismo. No basta que tengan el mismo contenido. Como en cada vuelta redeclaras this.datos en realidad no es el mismo objeto. Si lo declarases en el created o mounted, ahí se cambia toda la parrilla.

Otro punto importante:

Tal como te dijeron, no sacas nada con pasar la fila a tu función que cambia la imagen. Necesitas pasarle la celda.

Además, si te fijas, hay dos index metidos acá. El de adentro manda, pero si se puede evitar hacer shadowing, siempre es mejor.

<div v-for="(chairs,index) in fila">
    {{index}}
    <div v-for="(chair,index) in columna">
        {{index}}
        <a href="#" @click.prevent="cambiar(fila)"><img :src='columna[index].imagen' height="30px" width="30px"></a>
    </div>
</div>

Lo que imagino quieres hacer es

<div v-for="(chairs,rowindex) in fila">
    {{rowindex}}
    <div v-for="(chair,colindex) in columna">
        {{colindex}}
        <a href="#" @click.prevent="cambiar(rowindex, colindex)"><img :src='columna[colindex].imagen' height="30px" width="30px"></a>
    </div>
</div>

Con la consiguiente modificación al método cambiar. Pero si lo pensamos bien, salvo por el hecho cosmético de poner el par ordenado en los cuadritos, esos índices son innecesarios. La fila conoce a sus columnas, las columnas conocen a sus cuadritos y el cuadrito conoce su color. No es necesario referirse al cuatrito como columna[colindex].imagen ni menos como this.filas[1][1], pero me imagino que pusiste eso porque estabas debuggeando y a punto de destruir el monitor.

Mi solución minimalista sería:

  <div v-for="(columnas) in fila">
    <div  v-for="(celda) in columnas">
      <a href="#" @click.prevent="cambiar(celda)">
        <img :src='celda.imagen' height="40px" width="40px"></a>
    </div>
  </div>

y

    cambiar(celda) {
      let imgActual = celda.imagen,
        nuevaImg = (imgActual == this.des) ? this.oc : this.des;

      this.total += (imgActual == this.des) ? 30 : -30;
      celda.imagen = nuevaImg;
    }

Poniéndole un poco de maquillaje, queda así:

const srcOcupado = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAABCAYAAABUvRdkAAAAEElEQVR42mNkYPj/n2GQAAATFgIASyJWYwAAAABJRU5ErkJggg==';
const srcDesocupado = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAMUlEQVR42u3OQREAAAjDsM2/aEAGj/QqIJ3k/lFhYGBgYGBgYGBgYGBgYGBgYGBeYhYuhEXeFN3sZQAAAABJRU5ErkJggg==';



const vue = new Vue({

  el: "#app",
  data: {
    fila: [],
    columna: [],
    des: srcOcupado,
    oc: srcDesocupado,
    total: 0,
    datos: null,
    i: 0

  },
  methods: {
    cambiar(celda) {
      let imgActual = celda.imagen,
        nuevaImg = (imgActual == this.des) ? this.oc : this.des;

      this.total += (imgActual == this.des) ? -30 : 30;
      celda.imagen = nuevaImg;
    },
    getColumnas() {
      var columnas = [];
      for (var i = 0; i < 10; i++) {
        let celda = {
          imagen: this.oc
        }
        columnas.push(celda);
      }
      return columnas;

    },
    tamañoColumna() {
      for (let i = 0; i < 4; i++) {
        this.fila.push(this.getColumnas());
      }
    }
  },
  mounted() {
    this.tamañoColumna();
    globalThis.vueComponent = this; // esto lo puse yo para debug
  },
});
div div {
  display: block;
}
h2 {
position:absolute;
top:10px;
left:430px;
}
#app {
position : absolute;
width:100%;
}
div div div {
  display: inline-block;
}
.cols {
margin-left:5px;
}
.rows {
position: relative;
    top: 0;

}
small.coords {
color: white;
pointer-events:none;
    position: relative;
    right: -30px;
    top: -15px;
    font-weight: bold;
    font-size: 1em;
    margin-left: -24px;
    margin-right: -4px;
    margin-top: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>total:{{total}}</h2>
  <div class="rows" v-for="(columnas,rowindex) in fila">
    <div class="cols" v-for="(celda,colindex) in columnas">
     <small class="coords">{{rowindex}}, {{colindex}}</small>
      <a href="#" @click.prevent="cambiar(celda)">
        <img :src='celda.imagen' height="36px" width="36px"></a>
    </div>
  </div>
  

</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.