Thank you in advance for the help you can give me.
My problem is this:
I have an object (array) that I call 'cartons' and I want to present it in a table. each value of 'cartons' is an array of 5 positions, then the table would be 5 * x, where x would be the amount of array contained in the array 'cartons' .. now I decided to put a 6 box (column) to each row of the table, that is, that the table is of 6 * x; That sixth box would be represented with the following component called 'numerocarton':
Vue.component('numerocarton',{
props:['numero','ganador'],
template:'<td :style="{color:this.clasetd}">
<span :style="{color:this.clasetexto}">
{{ this.numero }}
</span>
</td>'
});
To this component I send you a property (c [0] .carton) that is the same for each of the 5 positions of each array of the 'cartons' array. In this way I try to build the table:
<table>
<tr v-for="c in cartones">
<td align="center" style="background-color: white">
{{c[0].carton}} </td> // linea de prueba para c[0].carton, funciona
<numerocarton
:numero="c[0].carton" // no funciona, busca a 'c[0].carton' en la instancia y no aquí en el v-for
:ganador="cartonganador"
>
</numerocarton>
<td align="center" v-for="formula1 in c" style="background-color:
white">
<casilla
:formula="formula1.f"
:letra="formula1.letra"
:carton="formula1.carton"
:miboton="boton"
:botonId="boton.identificador"
:botonEstado = "boton.estado"
:botoninf = "boton.inf"
:filasxcolumna = "filasTverdad"
:factual="balota.f"
>
</casilla>
</td>
</tr>
</table>
All this works well except for the part where I call the component:
<numerocarton :numero="c[0].carton" :ganador="cartonganador" >
</numerocarton>
more specifically in:
:numero="c[0].carton"
This line causes the following error to appear:
Which says that 'c' is not declared in the instance (in the data object of the instance), and this is the problem: I do not understand why it looks for 'c' in the instance when it would look in the v-for and is only in that line why is this
<td align="center" style="background-color: white"> {{c[0].carton}} </td>
No problem.
Again thank you, in advance, to anyone or anyone who can give me a hand to solve this.