alpine js，x-model 在切换选项卡时绑定到错误的值

Question

运行关于 alpine js 的问题。

首先，我有一个 master 组件，允许用户在两个选项卡之间切换

@props(['pages', 'blogs'])

<div x-data="init()" class="overview row mb30">
    <div class="pageContent__content__languages disFlex mb20 bBottom">
                    <span
                        @click.prevent='tab = "pages"'
                        :class='{ "active": tab === "pages" }'
                        class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 mr10 pointer">
                     Pagina's
                    </span>
        <span
            @click.prevent='tab = "blogs"'
            :class='{ "active": tab === "blogs" }'
            class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 bRadius mr10 pointer">
                         Blogs
                    </span>
    </div>

    <div x-show="tab === 'pages'">
        <x-form.edit.navigation.pages :pages="$pages" />
    </div>

    <div x-show="tab === 'blogs'">
        <x-form.edit.navigation.blogs :blogs="$blogs" />
    </div>

    <button type="button" wire:click="navigationAddToMenu" class="btn blue w100 mt10">
        Toevoegen aan menu
    </button>
</div>



@push('scripts')
    @once
        <script type='text/javascript'>
            function init() {
                return {
                    selected: @entangle('selected'),
                    tab: 'pages',
                };
            }
        </script>
    @endonce
@endpush

这些选项卡显示 pages 或 blogs，具体取决于单击哪个选项卡。

在这些 blade 组件内部只是一个 foreach 循环来显示项目，

@props(['pages'])
<div style="grid-area: unset" class="pageContent__settings bRadius--lrg disFlex fdCol">
    <table class="overview__wrapper">
        <tbody class="bRadius--lrg">
        @foreach($pages as $page)
            <tr class="overview__row bBottom">
                <td class="overview__row__checkbox">
                    <input x-model='selected'  value='{{ $page->id }}' type="checkbox"
                           id="col-row-{{$loop->index}}">
                    <label for="col-row-{{$loop->index}}"></label>
                </td>
                <td class="overview__row__name lh1">
                    {{ $page->page_name }}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

博客 blade 组件几乎相同。

现在用户可以选中复选框以将项目添加到他们的菜单中，这是使用 @entangle 指令和复选框上的 x-model 绑定的。

到目前为止，当用户位于默认选项卡 pages 并且他们 select 从复选框中检索到正确的 ID 页面时，但是当用户将选项卡切换到blogs 显示，并单击复选框从 pages 选项卡中检索值。

例如

1 个页面和 1 个博客，页面的 ID 为 1 博客的 ID 为 2。用户在 pages 选项卡上并单击复选框，正确的值 1 现在已添加到 selected 数组，用户将选项卡切换到 blogs 并单击复选框预期的行为是将 id 2 添加到 selected 数组，但它仍然添加 1.

检查 HTML 和循环确实为它们的每个项目添加了唯一的 ID。

Answer 1

已修复，需要让输入的 ID 更独特，而不是

     <input x-model='selected' value='{{ $blog->id }}' type="checkbox"
                           id="col-row-{{$loop->index}}">
                    <label for="col-row-{{$loop->index}}"></label>

我添加了一个额外的标识符

     <input x-model='selected' value='{{ $blog->id }}' type="checkbox"
                           id="col-row-blogs-{{$loop->index}}">
                    <label for="col-row-blogs-{{$loop->index}}"></label>

页面

和 pages。

这解决了问题

alpine js，x-model 在切换选项卡时绑定到错误的值

alpine js, x-model binds to wrong value when switching tabs

laravel

laravel-livewire

alpine.js