I have two variables with the data that my database returns to me in format array
, to which the data variable contains all the data that I want to render in my table, and the variable concept
has the key of the dynamic columns, in this case it would be the column TASKS, FINES. What I want is to dynamically render the values that my database returns.
data: function(){
datos:[{n_docu:"23248169",l_agen:"USUARIO",FAENAS:"1.00",MULTAS:"0.00"},
{n_docu:"71377558",l_agen:"SIMEON",FAENAS:"5.00",MULTAS:"1.00"},
{n_docu:"46117631",l_agen:"EGUAVIL",FAENAS:"0.00",MULTAS:"1.00"}],
concept:[{c_prod:"000004",l_prod:"FAENAS"},
{c_prod:"000005",l_prod:"MULTAS"}]
},
<table class="table table-hover table-sm table-bordered table-light mb-0">
<thead>
<tr>
<th scope="col">Codigo</th>
<th scope="col">Apellido y Nombre/razòn social</th>
<th scope="col" v-for="c in concept" v-text="c.l_prod"></th>
</tr>
</thead>
<tbody>
<tr v-for="d in datos">
<td v-text="d.n_docu"></td>
<td v-text="d.l_agen"></td>
<td v-for="c in concept" v-text="d+'.'+c.l_prod"></td>
</tr>
</tbody>
</table>
I've tried several ways and I can't get it.
<tr v-for="d in datos">
<td v-text="d.n_docu"></td>
<td v-text="d.l_agen"></td>
<td v-for="c in concept" v-text="d+'.'+c.l_prod"></td>
</tr>
and what I get is the following:
Code | Surname and Name/company name | TASKS | FINES |
---|---|---|---|
23248169 | USERNAME | [object object].FAENAS | [object object].FINES |
71377558 | SIMEON | [object object].FAENAS | [object object].FINES |
46117631 | EGUAVIL | [object object].FAENAS | [object object].FINES |
WHAT I WANT TO GET:
Code | Surname and Name/company name | TASKS | FINES |
---|---|---|---|
23248169 | USERNAME | 1.00 | 0.00 |
71377558 | SIMEON | 5.00 | 1.00 |
46117631 | EGUAVIL | 0.00 | 1.00 |
I hope you have made me understand, thanks in advance...
What you need is to access the property of the object
d
, whose name is equal to the value contained in the variablec.l_prod
.The correct syntax for this is:
Solution:
References: