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>