Hello everyone, I hope you are doing well
I request your collaboration or a little advice with the following problem
I have a view which is built dynamically from a database query by using a PHP API, the query works very well and I managed to print the list as I need it, but the problem is that in each list I must create an onclick event to open a Sheet Modal that is dynamic that when created loads 2 buttons and these buttons must run again other functions by sending the parameter that was received by the modal sheet, the truth I can not get the onclick work.
I attach code fragment I hope you can advise me. thank you very much.
<template>
<div class="page" data-name="stockEquipos">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Stock Equipos</div>
<div class="subnavbar">
<form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title"
class="searchbar searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Serial / Mac" />
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button if-not-aurora">Cancel</span>
</div>
</form>
</div>
</div>
</div>
<div class="searchbar-backdrop"></div>
<div class="page-content">
<!-- <div class="list simple-list searchbar-not-found"> -->
<div class="list links-list searchbar-not-found">
<ul>
<li><a href="#">No encontrado</a></li>
</ul>
</div>
<div class="list virtual-list media-list searchbar-found" id="ListStock">
</div>
</div>
</div>
</template>
<script>
export default (props, {
$f7,
$el,
$theme,
$on,
$,
$update
}) => {
let items;
$on('pageInit', async (res) => {
const BASE_URL = $f7.store.state.baseURL;
const TOKEN = $f7.store.state.token;
let resp = await $f7.request.post(BASE_URL + 'Equipos/Equipos.php', {
cedula: localStorage.Cedula,
token: TOKEN,
type: 'StockEquipos'
}, 'json');
if (resp.data.status === '203') {
$f7.dialog.alert('No hay datos para listar, vuelva a intentar');
$f7.progressbar.hide();
return false;
}
if (resp.data.status !== '200') {
$f7.dialog.alert('Error en la consulta, vuelva a intentar');
$f7.progressbar.hide();
return false;
}
items = resp.data.body;
$f7.progressbar.hide();
const virtualList = $f7.virtualList.create({
// List Element
el: $el.value.find('.virtual-list'),
// Pass array with data
items,
// Custom search function for searchbar
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if (items[i].fk_Serial.toLowerCase().indexOf(query.toLowerCase()) >=
0 ||
items[i].Mac.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
query.trim() === '') found.push(i);
}
return found; //return array with mathced indexes
},
// List item render
renderItem(item) {
return `<li>
<a href="#" class="item-content">
<div class="item-inner text-color-gray">
<div class="item-title-row">
<div class="item-title">
<strong>Serial: </strong>${item.fk_Serial}
</div>
</div>
<div class="item-title-row">
<div class="item-title">
<strong>Mac: </strong>${item.Mac}
</div>
<div class="item-after">${item.Nombre_Estado}</div>
</div>
<div class="item-title-row">
<div class="item-title">${item.Nemotecnico}</div>
<div class="item-after"><button class="col button button-raised button-fill" @click=${SubMenu(item.fk_Serial)}>Detalle Equipo</button></div>
</div>
</div>
</a>
</li>`;
},
// Item height
height: $theme.ios ? 1 : ($theme.md ? 109 : 1),
});
});
let SubMenu = (serial) => {
var dynamicSheet = $f7.sheet.create({
content: `<div class="sheet-modal">
<div class="toolbar">
<div class="toolbar-inner">
<div class="left"></div>
<div class="right">
<a class="link sheet-close">Done</a>
</div>
</div>
</div>
<div class="sheet-modal-inner">
<div class="padding-horizontal padding-bottom">
<button class="col button button-large button-raised button-fill" @click=${DetailEq(serial)}>Detalle Equipo</button>
</div>
<div class="padding-horizontal padding-bottom">
<button class="col button button-large button-raised button-fill color-orange">Marcar como malo</button>
</div>
</div>
</div>`,
});
// Open dynamic sheet
dynamicSheet.open();
};
let DetailEq = async (serial) => {
const BASE_URL = $f7.store.state.baseURL;
const TOKEN = $f7.store.state.token;
let resp = await $f7.request.post(BASE_URL + 'Equipos/Equipos.php', {
serial,
token: TOKEN,
type: 'DetailEquipo'
}, 'json');
if (resp.data.status === '203') {
$f7.dialog.alert('No hay datos para listar, vuelva a intentar');
$f7.progressbar.hide();
return false;
}
if (resp.data.status !== '200') {
$f7.dialog.alert('Error en la consulta, vuelva a intentar');
$f7.progressbar.hide();
return false;
}
let dataSerial = resp.data.body;
$f7.progressbar.hide();
console.log('SERIAL: ', serial);
/* CARGAR VISTA CON RESULTADOS*/
}
return $render;
};
</script>