Alpine.js show/hide 图片选择器

Question

这里我有一个图像选择器。当在第二个 <\li> 中单击图像 link 时，它将显示在第一个 <\li> 中。这很好用。

我想弄清楚如何做的也是在第二个 <\li> 中单击图像 link 时隐藏 {{--Place holder Image--}}。

<div x-data="{ image: '' }" >
    <ul>
        <li>
            {{--Placeholder Image --}}
            <img x-show="image = true" src="/img/image1">

            @foreach($images as $image)
                 <img x-show="image === '{{ $image->id }}'" src="{{ $image->path }}">
            @endforeach
         </li>

         @foreach($image as $image)
         </li>
             <a href="#" @click.prevent="image = '{{ $image->id }}'">
                 <img src="{{ $image->path }}">
            </a>
         </li>
         @endforeach
     </ul>

</div>

Answer 1

我想通了。只需将占位符图像标记中的 'x-show="image = true"' 更改为 x-show="image === ''"。

Alpine.js show/hide 图片选择器

Alpine.js show/hide image for a image selector

alpine.js