标签: alpine.js

我有一个按钮，单击它会显示一条 toast 消息。我试图在显示按钮时自动显示 toast 消息（无需单击它）。

这是我的代码：

<button x-data
    @click="$dispatch('notice', {type: 'success', text: ' Success!'})"
    class="m-4 bg-green-500 text-lg font-bold p-6 py-2 text-white shadow-md rounded">
    Success
</button>

<div
    x-data="noticesHandler()"
    class="fixed inset-0 flex flex-col-reverse items-end justify-start h-screen w-screen"
    @notice.window="add($event.detail)"
    style="pointer-events:none">
    <template x-for="notice of notices" :key="notice.id">
        <div
            x-show="visible.includes(notice)"
            x-transition:enter="transition ease-in duration-200"
            x-transition:enter-start="transform opacity-0 translate-y-2"
            x-transition:enter-end="transform opacity-100"
            x-transition:leave="transition ease-out duration-500"
            x-transition:leave-start="transform translate-x-0 opacity-100"
            x-transition:leave-end="transform translate-x-full opacity-0"
            @click="remove(notice.id)"
            class="rounded mb-4 mr-6 w-56  h-16 flex items-center justify-center text-white shadow-lg font-bold text-lg cursor-pointer"
            :class="{
                'bg-green-500': notice.type === 'success', …

在 laravel 7 中，使用 livewire 1.3 和 alpine@v2.xx 我制作了一个手风琴，如下所示：

<div class="accordion_wrapper">

    @foreach($faqs as $nextFaq)
        <div class="accordion_{{ $nextFaq->id }}" x-data="{ is_opened: false }">
            <button @click="is_opened= !is_opened">
                <div>Question {{ $nextFaq->id }}</div>
            </button>
            <div class="accordion_content" x-show="is_opened">
                {{ $nextFaq->id }} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
            </div>
        </div>
    @endforeach

</div>

它有效，但我怎样才能用 alpine 只打开 1 个项目？如果用户单击某些其他项目，则必须关闭其余项目。

我想在 X 秒后用 Alpine 隐藏一个元素。因此，我需要运行 setTimeout() 来更改元素的 x-show 绑定到的 x-data 变量。

我目前正在使用带有普通 JS 的脚本标记，但我似乎无法从中访问 x-data 变量。

举个例子：

<div x-data="showSomething = true">
    <script>
        setTimeout(() => {
            this.showSomething = false;
        }, 1500);
    </script>
</div>

无论我使用“this”，我都会收到此错误。或不：

未捕获的引用错误：showSomething 未定义

我怎样才能从普通的JS访问x-data变量，或者有没有办法在Alpine中解决这个问题？

编辑：我通过使用 x-on 侦听事件解决了这个问题（并引用该函数中没有 .this 的变量）

这里我附上的 Jquery 代码运行良好。但我需要 ALpine js 中的这段代码。如果我选择单选检查，我们需要根据复选框显示 div 内容

$(document).ready(function() {
   $("div.desc").hide();
   $("input[name$='Victim']").click(function() {
    var test = $(this).val();
      $("div.desc").hide();
      $("#" + test).show();





     <h3> Who was involved in this incident? </h3>

<p><label><input name="Victim" type="radio" value="Guest" required >Guest </label></p>
<div id="Guest" class="desc">
    <p><strong>Guest</strong> questions here ...</p>
     </div>
<p><label><input name="Victim" type="radio" value="Employee" > Employee </label</p>
    <div id="Employee" class="desc">
        <p><strong>Employee</strong> questions here ...</p>
         </div>
      
  <p><label><input name="Victim" type="radio" value="Vendor" > Vendor</label></p>
  <div id="Vendor" class="desc">
    <p><strong>Vendor</strong> questions here ...</p>
     </div>