Alpine.JS 在另一个函数中访问 JavaScript 中的 x-data 函数

Question

我正在尝试将一些内联 alpine.js 移动到外部 JavaScript 文件，考虑到能够在使用 [= 提交表单后操纵例如模态的状态26=].

所以我的模态顺风：

<div x-data="showFileModal" class="inline-block">
    <button type="button" @click="toggle">{{ __('Open Model') }}</button>

    <div x-show="openFileModal" class="flex fixed overflow-auto z-10 top-O right-0 bottom-0 left-0">
        <div x-show="openFileModal" class="w-2/5 p-5 mx-auto" @click.away="toggle">
            <form action="" method="">
                <button id="form-submit" type="submit">{{ __('Submit') }}</button>
            </form>
        </div>
    </div>
</div>

我的外部 JavaScript 文件：

window.showFileModal = () => {
    return {
        openFileModal: false,
        toggle() {
            this.openFileModal = ! this.openFileModal;
        }
    }
};

$('#form-submit').click(function (e)
{
    e.preventDefault();
    
   $.ajax({
       success: function (s)
       {
           showFileModal().toggle();
       }
   })
});

用于打开和关闭模型的按钮上的切换功能有效，但尝试在 ajax 成功功能中调用它无效。即使我在没有任何 ajax 逻辑的普通按钮上尝试它也不起作用。如果我尝试使用 'this'.

的变体，我要么在控制台中没有收到任何错误，要么收到错误提示切换不是一个功能

如何在 showFileModal 函数之外调用切换函数？

Answer 1

发生这种情况很可能是因为您的 showFileModal 模块在您调用它的地方不可用。您还将 Alpine.js 与 JQuery 混用，这不是必需的。

我建议这样：

<div x-data="showFileModal" class="inline-block">
<button type="button" @click="toggle">{{ __('Open Model') }}</button>

<div x-show="openFileModal" class="flex fixed overflow-auto z-10 top-O right-0 bottom-0 left-0">
    <div x-show="openFileModal" class="w-2/5 p-5 mx-auto" @click.away="toggle">
        <form action="" method="">
            <button type="submit" 
                    @click.prevent="submitForm()">
                {{ __('Submit') }}
            </button>
        </form>
    </div>
</div>

并且在您的 JS 中，您必须像这样声明函数

window.showFileModal = () => {
    return {
        openFileModal: false,
        toggle() { .. },
        submitForm(event) {
            // do your API request here
        }
    }
};

Alpine.JS 在另一个函数中访问 JavaScript 中的 x-data 函数

Alpine.JS access x-data function in JavaScript inside another fuction

javascript

jquery

alpine.js