javascript - Alpine.js を使用して 1 つのページに 2 つのモーダルを作成する

Question

1 つのページに 2 つのモーダルを作成していますが、それを機能させる方法に問題があります。ここに例をコピーして、次のような関数に変換しました。

function isDialogOpen() {
    return {
        modal: false,
        open() { this.modal = true;document.body.classList.add("modal-open"); },
        close() { this.modal = false;document.body.classList.remove("modal-open"); },
        isOpen() { return this.modal === true },
    }
}

これら 2 つのモーダルは要素内にラップされ<main>ます。

<main class="assignedquestion"  x-data="isDialogOpen()" @keydown.escape="close">

私はそれを次のようにしようとしました：

<main class="assignedquestion"  x-data="...isDialogOpen(), ...reassignDialog()" @keydown.escape="close">

そして、異なる変数と関数で別の関数を作成します。

function reassignDialog() {
    return {
        reassignmodal: false,
        openReassign() { this.reassignmodal = true;document.body.classList.add("modal-open"); },
        closeReassign() { this.reassignmodal= false;document.body.classList.remove("modal-open"); },
        isOpenReassign() { return this.reassignmodal=== true },
    }
}

残念ながら、うまくいきません。最初のモーダルのみが表示されます。
これらのモーダルは、2 つの異なるボタンによってトリガーされます。

以下は私のモーダルのマークアップです：

最初のモーダル

<!-- overlay -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpen()"
    :class="{ 'user-history-modal': isOpen() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpen()"
       @click.away="close"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="close"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

2 番目のモーダル

<!-- overlay reassignDialog -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpenReassign()"
    :class="{ 'reassign-history-modal': isOpenReassign() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpenReassign()"
       @click.away="closeReassign"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="closeReassign"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->