Alpine JS: X-data async not initiating x-model

Question

Here is the case :

the HTML:

<form x-data="{cmpData:[]}" x-init=" cmpData = await cmpForm('myID')">
<input  x-model="cmpData.myref" name="myref" type="text">

the JS:

async function cmpForm(CMP) {
    let myData=[]
    myData= await DB.myDB.get(CMP);
    if(!myData){
        myData= {
            myref: CMP,
            somethingelse:'',
        }
    }

    return {
        cmpData:myData,
    }
}

=> no error but the input is not working = no x model

but if i

 <input  x-model="cmpData.cmpData.myref" name="myref" type="text">

the input work , but it triggers an error

Uncaught (in promise) TypeError: cmpData.cmpData is undefined

please, let me know what i miss !

i just would like : form is initialized with async function

thank you

score 1 · Answer 1 · answered Jun 23 '21 at 09:54

Founded !!!

in fact , the x-data must be all array initialized

 <form x-data="{cmpData:{myarray:[]}}" x-init=" cmpData = await cmpForm('myID')">
 <input  x-model="cmpData.myarray.myref" name="myref" type="text">

then

async function cmpForm(CMP) {
    let myData=[]
    myData= await DB.myDB.get(CMP);
    if(!myData){
        myData= {
            myref: CMP,
            somethingelse:'',
        }
    }

    return {
        myArray:myData,
    }
}

Alpine JS: X-data async not initiating x-model

1 Answers1