Supongamos que tengo un componente como este:
'use strict'; export default () => ({ selected: false, init(selectedIndex: -1) { } });y lo importo así (usando AlpineJS 3):
import Alpine from 'alpinejs' window.Alpine = Alpine window.Components = {}; import Tab from "./components/Tab"; window.Components.Tab = Tab; Alpine.start(); ¿Cómo puedo ahora pasar valor al método init ?
Cuando tengo:
<div x-data="Components.Tab(0)">...</div> El valor obviamente no se pasa al método init .
Aunque hay información en los documentos sobre cómo registrar el componente de un paquete e información sobre cómo pasar los parámetros iniciales , no hay información sobre cómo pasar los parámetros iniciales al componente registrado desde un paquete.
Como puede ver en la documentación de la función init :
Si su componente contiene un método
init()
no puede agregar parámetros al método init() (observe los dos corchetes que significan que no hay parámetros).
Los parámetros deben agregarse al componente mismo. Por lo tanto, la definición de su componente debería ser:
'use strict'; export default (initialSelected = -1) => ({ selected: initialSelected, init() { } }); Por cierto, noté que su campo selected es booleano mientras que su parámetro de índice selectedIndex es numérico. En mi código corregido arriba, solo usé numérico para ambos.
Además, has usado esto en tu código:
window.Components.Tab = Tab; Pero la documentación a la que se ha vinculado dice que necesita usar Alpine.data('Tab', Tab) para registrarse desde un paquete.