How can I pass a value to init methods on import?

user_3593996 0
Viewed 363

Let's assume I have component like this:

'use strict';

export default () => ({
    selected: false,
    init(selectedIndex: -1)
    {

    }

});

and I import it like this (using AlpineJS 3):

import Alpine from 'alpinejs'

window.Alpine = Alpine

window.Components = {};

import Tab from "./components/Tab";
window.Components.Tab = Tab;

Alpine.start();

How can I now pass value to init method?

When I have:

<div x-data="Components.Tab(0)">...</div>

value is obviously not passed to init method.

Although there is info in docs how to register component from a bundle and info how to pass initial parameters, there is no info how to pass initial parameters to component registered from a bundle

alpine.js javascript
1 Answers

As you can see in the documentation of the init function:

If your component contains an init() method

you cannot add parameters to the init() method (notice the two brackets that mean no parameters).

The parameters have to be added to the component itself. So your component definition should be:

'use strict';

export default (initialSelected = -1) => ({
    selected: initialSelected,
    init()
    {

    }

});

BTW, I noticed that your selected field is boolean while your selectedIndex parameter is numerical. In my corrected code above I just used numerical for both.

Also, you have used this in your code:

window.Components.Tab = Tab;

But the documentation you have linked to says you need to use Alpine.data('Tab', Tab) to register from a bundle.

user_29693320
Related