如何在基于数组的复选框的for-circle中定义x-model？

Question

在我的 Laravel 8 / tailwindcss 2 / Alpinejs 2.8 应用程序中，我根据数组填充了一组复选框，例如：

<template x-for="nextCategory in categories" :key="nextCategory.id">
    <tr class="p-4 mb-15">
        <td>
           <input type="checkbox"
                x-bind:id="'cbx_' + nextCategory.id" 
                name="cbx_Categories" 
                x-bind:value="nextCategory.id"
                class="p-4 checked:bg-blue-600"
            >
            <label :for="'cbx_' + nextCategory.id" class="whitespace-nowrap md:flex-shrink-0" 
            x-text="nextCategory.id+' : '+nextCategory.name">
            </label>
        </td>
        <td class="text-right" x-text="nextCategory.ad_categories_count">
        </td>
    </tr>
</template>

复选框呈现正常，但我尝试保持数组中任何复选框元素的状态定义为：

  searchSelectedCategoryIds: [],

并在复选框 x 模型定义中使用此数组：

<template x-for="nextCategory in categories" :key="nextCategory.id">
    <tr class="p-4 mb-15">
        <td>
           <input type="checkbox"
                x-bind:id="'cbx_' + nextCategory.id" 
                name="cbx_Categories" 
                x-bind:value="nextCategory.id"
               x-model="searchSelectedCategoryIds"
               class="p-4 checked:bg-blue-600"
            >
            <label :for="'cbx_' + nextCategory.id" class="whitespace-nowrap md:flex-shrink-0" 
            x-text="nextCategory.id+' : '+nextCategory.name">
            </label>
        </td>
        <td class="text-right" x-text="nextCategory.ad_categories_count">
        </td>
    </tr>
</template>

结果是通过单击任何复选框，所有复选框都被选中并且 searchSelectedCategoryIds 具有“开”值

哪种方式有效？

修改后的块：

@extends('layouts.app')
@section('content')

    <div class="flex items-center justify-center p-8 m-10">

        <div class="flex justify-center w-screen h-screen bg-gray-100"  x-data="checkBoxTest()" >

            categories::<span x-text="categories.id"></span><br><hr>
            TestsearchSelectedCategoryIds::<span x-text="TestsearchSelectedCategoryIds"></span><br><hr>
                              <table x-show="categories.length">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Ads Number</th>
                                </tr>
                                </thead>
                                <tbody>

  <template x-for="nextCategory in categories" :key="nextCategory.id">
    <tr class="p-4 mb-15">
        <td>
           <input type="checkbox"
                x-bind:id="'cbx_' + nextCategory.id" 
                name="cbx_Categories" 
                x-bind:value="nextCategory.id"
                class="p-4 checked:bg-blue-600"
                x-model="TestsearchSelectedCategoryIds"     
            >
            <label :for="'cbx_' + nextCategory.id" class="whitespace-nowrap md:flex-shrink-0" 
            x-text="nextCategory.id+' : '+nextCategory.name">
            </label>
        </td>
        <td class="text-right" x-text="nextCategory.ad_categories_count">
        </td>
    </tr>
</template>
                                   </table>
  
  </div>
    </div>

@endsection

@section('scripts')
    <script>


function checkBoxTest() {
    return {
      TestsearchSelectedCategoryIds: '',
    
categories : [
  {
     ad_categories_count: 2,
     id: 1,
     name: "Laptops"
  },
  
  {
    ad_categories_count: 3,
    id: 2,
    name: "Computer Monitor"
  },
  
  {
    ad_categories_count: 4,
    id: 4,
    name: "Computer Accessories"
  }
    
]

    }}


    </script>
@endsection

Answer 1

[编辑以减少混淆]

我需要看看你的 x-data。您的 <template> 看起来不错。我试图将 searchSelectedCategoryIds: [], 的值设置为 "on" 并且只能在以下情况下重现您的结果：

我设置searchSelectedCategoryIds: [],；和
我删除了 <input> 属性中的 x-bind:value="nextCategory.id"。

同时，如果：

我设置了 searchSelectedCategoryIds: '', 而不是 searchSelectedCategoryIds: [], （string 而不是 array）；和
我在<input>属性中设置了x-bind:value="nextCategory.id"；

我将得到 true 的值，这也是错误的输出。

AFAIK，如果我们不设置它，浏览器将确定 <input type="checkbox"> 的值。在这种情况下，浏览器将其设置为 "on"。所以，这里的问题是绑定失败，但我无法验证，除非我能看到你的 x-data 结构。这是我尝试复制但已设置好所有内容：

<form class="bg-gray-800">
  <div class="flex justify-center items-center max-w-lg mx-auto h-screen">
    <table x-data="formRender()" class="bg-gray-50">
      <caption class="bg-gray-100 font-light text-yellow-700 uppercase tracking-widest">Title</caption>
      <thead class="border-t border-gray-300 font-bold">
        <tr>
          <td>Item</td>
          <td>Count</td>
        </tr>
      </thead>
      <tbody class="divide-y border-gray-300">
        <template x-for="nextCategory in categories" :key="nextCategory.id">
          <tr class="p-4 mb-15">
            <td>
              <input type="checkbox" x-bind:id="'cbx_' + nextCategory.id" name="cbx_Categories" x-bind:value="nextCategory.id" x-model="searchSelectedCategoryIds" class="p-4 checked:bg-blue-600">
              <label :for="'cbx_' + nextCategory.id" class="whitespace-nowrap md:flex-shrink-0" x-text="nextCategory.id+' : '+nextCategory.name">
              </label>
            </td>
            <td class="text-right" x-text="nextCategory.ad_categories_count">
            </td>
          </tr>
        </template>
      </tbody>
      <tfoot>
        <tr>
          <td class="bg-yellow-500 text-center" colspan="2">
            <output x-text=" 'Item checked: ' + searchSelectedCategoryIds"></output>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</form>
<script>
  function formRender() {
    return {
      categories: [{
          id: 1,
          name: 'banana',
          ad_categories_count: 'one'
        },
        {
          id: 2,
          name: 'apple',
          ad_categories_count: 'two'
        },
        {
          id: 3,
          name: 'orange',
          ad_categories_count: 'three'
        }
      ],
      searchSelectedCategoryIds: [],
    }
  }
</script>

https://codepen.io/wanahmadfiras/pen/YzpmERK

如何在基于数组的复选框的for-circle中定义x-model？

How to define x-model in for-circle of checkboxes based on array?

alpine.js