I have a function, which through an api, I bring the data and place it in an array.
self.PrestamosXUsuario = function () {
fetch(environment.apiPoint + '/prestamos?empresa=' + empresa + '&anexo=' + anexo, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(datos => {
datos.forEach(e => {
self.arrayPrestamos.push({
observacion: e.observacion,
monto: e.monto,
desctTotal: e.desctTotal
})
})
})
self.openModalPrestamos();
}
But when I add another td with an image so that when I click it, a modal opens with the details of that data, I get an error.
<thead class="thead-dark">
<tr style="text-align: center;">
<th scope="col">PRÉSTAMO</th>
<th scope="col">TOTAL</th>
<th scope="col">SALDO</th>
</tr>
</thead>
<tbody data-bind="foreach: arrayPrestamos">
<tr>
<td style="text-align: center;" data-bind="text: observacion"></td>
<td style="text-align: right;" data-bind="text: monto"></td>
<td style="text-align: right;" data-bind="text: desctTotal"></td>
<td><img id="details" class="details" src="../../img/details.png" height="30px"
data-bind="click: DetallePrestamos"></td>
</tr>
</tbody>
The error message is as follows
Uncaught (in promise) ReferenceError: Unable to process binding "click: function(){return DetallePrestamos }"
Message: DetallePrestamos is not defined
What I hope is that when clicking on that image that is in the table, another modal will open with the details of each data.