在脚本标签中添加一个 html 模型

Question

我有一个模式，通常它是用@click="openMailSave"打开的，但现在我需要在保存完成后执行它。根据我的需要，当我点击 <button> 它首先执行脚本然后打开模式

模态：

<div x-show="isMailSaveOpen" x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center">
    <!-- MailSave -->
    <div x-show="isMailSaveOpen" x-transition:enter="transition ease-out duration-150"
      x-transition:enter-start="opacity-0 transform translate-y-1/2" x-transition:enter-end="opacity-100"
      x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0  transform translate-y-1/2" @click.away="closeMailSave"
      @keydown.escape="closeMailSave"
      class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
      role="dialog" id="MailSave">
      <!-- Modal body -->
      <div class="mt-4 mb-6">
        <!-- Modal title -->
        <p class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
          Success
        </p>
        <!-- Modal description -->

        <p class="text-sm text-gray-700 dark:text-gray-400">
          Mail settings have been updated successfully and the queue worker was restarted to apply these changes.
        </p>
      </div>
      <footer
        class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800">
        <button @click="closeMailSave"
          class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray">
          Ok
        </button>
      </footer>
    </div>
  </div>

执行代码

$(document).ready(function () {
    $('#testButton').on('click', saveAndTestSettings);
    $('#saveButton').on('click', function () {
      saveSettings().done(function () {
        // need to execute a modal here
      });
    });
  });

编辑： 关闭模态时，它执行

closeMailSave() {
  this.isMailSaveOpen = false
  this.trapCleanup()
}

使用 @click="openMailSave" 时完全正常
使用Dauros的答案时，没有定义，报错Uncaught (in promise) ReferenceError: closeMailSave is not defined

Answer 1

您可以分派 custom event from the jQuery save function that you catch on Alpine.js 组件。

<div x-data="{isMailSaveOpen: false}" @save-settings.document="isMailSaveOpen = true">
    <!-- Modal window -->
</div>

我们在 document 根对象上调度事件：

$(document).ready(function () {
    $('#saveButton').on('click', function () {
      saveSettings().done(function () {
        document.dispatchEvent(new Event('save-settings'))
      });
    });
});

在脚本标签中添加一个 html 模型

Adding a html model in the script tag

html

jquery

alpine.js