vuejs v-for, reference problem with objects and components

1

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.

    
asked by Wilmer 16.11.2017 в 03:06
source

0 answers