Javascript 从获取的数据中绑定数据组件

如何将获取的响应中的数据绑定到组件

我的目标是检查用户当前的deliveryProvider（从firestore获取）是否与给定的提供商名称匹配

<template x-for="(provider, index) in Object.values(deliveryProviders.providers)" :key="provider">
<div>
    <label>
        <div class="relative flex justify-between border border-b-0 border-gray-200 p-3 md:pl-4 md:pr-6"
            :class="{
                'rounded-tl-md rounded-tr-md' : index === 0, 
                'rounded-bl-md rounded-br-md border-b': (Object.values(deliveryProviders.providers).length == index+1)}">
            <div class="text-sm flex cursor-pointer">
                <input name="deliveryProviders" type="checkbox" :value="provider.name"
                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
                    :checked="user.deliveryProvider.includes(provider.name)">
                <div class="ml-3">
                    <div class="font-medium text-gray-900" x-text="provider.name"></div>
                    <div class="text-sm block text-gray-500" x-text="provider.description">
                    </div>
                </div>
            </div>
        </div>
    </label>
</div>

这种方法会导致

无法使用代码段读取未定义的
的属性“includes”
您的脚本正在尝试加载，而
deliveryProviders
未定义。别这样

<div x-if="deliveryProviders !== undefined">
  <template x-for="(provider, index) in Object.values(deliveryProviders.providers)" :key="provider">
    <div>
      <label>
        <div class="relative flex justify-between border border-b-0 border-gray-200 p-3 md:pl-4 md:pr-6"
            :class="{
                'rounded-tl-md rounded-tr-md' : index === 0, 
                'rounded-bl-md rounded-br-md border-b': (Object.values(deliveryProviders.providers).length == index+1)}">
            <div class="text-sm flex cursor-pointer">
                <input name="deliveryProviders" type="checkbox" :value="provider.name"
                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
                    :checked="user.deliveryProvider.includes(provider.name)">
                <div class="ml-3">
                    <div class="font-medium text-gray-900" x-text="provider.name"></div>
                    <div class="text-sm block text-gray-500" x-text="provider.description">
                    </div>
                </div>
            </div>
        </div>
      </label>
    </div>
  </template>
</div>



解释的解决方案
上面的代码段通过fetch接口使用AJAX从服务器请求数据。唯一的问题是没有任何东西告诉AlpineJS脚本等待数据填充。放置
x-if
逻辑将跳过有问题的代码，直到加载了它所依赖的变量