Access data in init function

[bluebrown]

Hi,

How can we access the data. The inline examples dont show it properly. Is there something that we can pass into the function?

x-data="state()"  x-init="init(data)"

interface IPageState {
  gridview: boolean,
  items: any[]
};


(window as any).state = function() {
  return {
    gridview: true,
    items: [],
  } as IPageState
};

(window as any).init = function(state: IPageState) {
  state.items = ['a', 'b', 'c']
}

Uncaught (in promise) ReferenceError: data is not defined

I think it would be good to show other example than just in HTML file for the script.

[SimoTod]

What's data? Is it a variable in your data context? x-data is an object literal (or in your case a function returning an object) with a list of key values. This is your component scope.
For example x-data="{foo: 'test', bar: 'test2'}", in your directives you are going to have access to foo and bar.
Your functions, if defined in your data scope have access to those variables as well using this.foo and this.bar.

[SimoTod]

Sorry, I replied from the email and it didn't show me the snippet you included after the message.
The "Alpine" way would be to include init into state()

state = function() {
  return {
    gridview: true,
    items: [],
    init() {
      this.items = ['a', 'b', 'c']
    }
  }
};

[bluebrown]

Ok, I see. Thanks for the reply.

Its maybe worth pointing out that the name init is arbitrary here. Just by naming it init and putting it there, it's not getting called. I had to combine it with x-init

<div x-data="state()" x-init="init()">
    ....
</div>

const state = () => ({
  items: [],
  init() {
    this.items = ["a", "b", "c"];
  }
});