Hola a todos espero se encuentren muy bien
Solicito su colaboración o un poco de asesoría con el siguiente problema
tengo una vista la cual se construye dinámicamente desde una consulta a base de datos por consumo de una API de PHP, la consulta me funciona muy bien y me logra imprimir la lista como la necesito, pero el inconveniente es que en cada lista debo de crear un evento onclick para que me abra un Sheet Modal que es dinámico que al crearse carga 2 botones y estos botones deben de ejecutar nuevamente otras funciones enviando el parámetro que se recibió por el sheet modal, la verdad no consigo que funcionen los onclick
anexo fragmento de código espero me puedan asesorar. muchas gracias.
<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>