Alpine JS：X-data async 未启动 x-model答案

【问题标题】：Alpine JS: X-data async not initiating x-modelAlpine JS：X-data async 未启动 x-model
【发布时间】：2021-06-23 17:54:06
【问题描述】：

情况是这样的：

HTML：

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

JS：

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

    return {
        cmpData:myData,
    }
}

=> 没有错误但输入不起作用 = 没有 x 模型

但是如果我

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

输入工作，但它触发了错误

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

请告诉我我想念什么！

我只是想：用异步函数初始化表单

谢谢

【问题讨论】：

标签： async-await alpine.js

【解决方案1】：

成立！！！

事实上，x-data 必须全部初始化为数组

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

然后

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

    return {
        myArray:myData,
    }
}

【讨论】：