编辑视图中Blade组件复选框列表初始化选中异常排查

核心问题 #

1. 冗余的数组生成逻辑：原代码用嵌套循环生成$condiciones，效率低且易出错
2. 组件属性解析错误：手动读取:condiciones属性值得到的是字符串，而非JS数组，导致includes判断失效
3. x-model绑定错误：组件内部的condiciones数组与父组件的数组无关联，无法同步初始化状态
4. 语法笔误：组件init方法中多了一个多余的e，导致JS报错

分步解决 #

1. 优化$condiciones生成逻辑

用Laravel集合的pluck方法直接提取已选服务ID，替代嵌套循环：

@php
    $condiciones = $editar ? $alquiler->servicios->pluck('id')->toArray() : [];
@endphp

2. 修改主视图组件调用方式

直接将父组件的condiciones数组通过x-model绑定到子组件，无需单独传递condiciones属性：

<div x-data='{servicios:@json($servicios),condiciones:@json($condiciones)}' class="w-full">
  <ul class="whitespace-normal">
    <template x-for="(servicio,indice) in servicios" :key="indice">
      <x-check-boton 
        :id="servicio.identificador" 
        :texto="servicio.servicio" 
        :valor="servicio.id"
        x-model="condiciones"
      ></x-check-boton>
    </template>
  </ul>
</div>

3. 简化Blade组件逻辑

去掉组件内部复杂的x-data和init逻辑，直接利用Blade的$attrs获取属性，并绑定父组件的condiciones数组：

<li class="inline-block" {{ $attributes }}>
  <div class="flex">
    <input 
      type="checkbox" 
      :id="$attrs.id" 
      name="servicios[]" 
      :value="$attrs.valor" 
      class="peer hidden" 
      x-model="$parent.condiciones"
    />
    <label 
      :for="$attrs.id" 
      class="select-none cursor-pointer rounded-full border-[1px] border-gray-400
             py-2 px-6 font-light text-gray-800 transition-colors duration-200 ease-in-out
             peer-checked:bg-emerald-800 bg-transparent peer-checked:text-gray-50 peer-checked:border-none m-2"
      x-text="$attrs.texto"
    ></label>
  </div>
</li>

原理说明 #

• Alpine.js的x-model绑定到数组时，会自动将复选框的value值加入/移除数组，同时自动匹配数组中已存在的值，完成初始化选中
• 通过$parent.condiciones直接访问父组件的响应式数组，确保状态同步
• 利用Blade组件的$attrs属性直接获取传递的参数，避免手动解析DOM属性的繁琐和错误

内容的提问来源于stack exchange，提问作者Leandro Caplan