高山JS数据绑定组件从获取的数据

Question

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

我的目标是检查用户当前的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>

这种方法产生了Cannot read property 'includes' of undefined

Answer 1

使用您的代码片段

未定义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逻辑将跳过有问题的代码，直到它所依赖的变量加载完毕。