laravel 从javascript调用AlpineJS函数

c6ubokkw 于 2023-01-06 发布在 Java

关注(0)|答案(1)|浏览(170)

我用alpine js来显示或隐藏一个modal。当我按下一个按钮时，我会检查一个bool，如果它是真的，那么我想关闭那个modal，这样做我必须与alpine的数据交互。有没有办法从js调用Alphines的函数？
我尝试使用自定义事件，但似乎不起作用
第一个月
然后在情态动词的div x-show="isOpen()" @closeModal.window="close"中
编辑：
多亏了pthomson answer，我才能让它工作，而且我还找到了一种不使用事件的方法

<div x-data>
    <button type="button" @click="$store.modal.open()">Open Modal</button>
    <div x-show="$store.modal.isOpen()">
        //Modal content
    </div>
</div>

<script>
    document.addEventListener('alpine:init', () => { 
        Alpine.store('modal', {
            show:false,
            isOpen() {
                return this.show;
            },
            open(){
                this.show=true;
            },
            close(){
                this.show =false;
            }
        })
    })

    function closeModal(){
        Alpine.store("modal").close();
    }
</script>

laravel

来源：https://stackoverflow.com/questions/75009019/call-alpinejs-function-from-javascript

1条答案

按热度按时间

n53p2ov01#

我使用Alpine Store值和自定义事件执行此操作（在document上，但是如果你愿意，它也可以上升到window）。alpine:init事件正在注册两个文档监听器。你的按钮将调度这个closemodal事件（escape keydown在这个例子中也隐藏了modal）我在div上设置了style="display: none"，以便在页面加载过程中调用alpine:init之前隐藏它...也许div上的x-cloak可以达到同样的效果（最初隐藏）。我在所有需要模态功能的页面上都包含了这个模态分部，所以它最终成为所有页面共享的一个Alpine Store变量，因为它们在页面标记中共享相同的模态分部视图。

<script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('openmodal', false);

        document.addEventListener('openmodal', () => {
           Alpine.store('openmodal', true);
        })
        document.addEventListener('closemodal', () => {
           Alpine.store('openmodal', false);
           // clear modal content here if you want
        })
    });
</script>

<div
        x-show="$store.openmodal"
        style="display: none"
        x-on:keydown.escape.prevent.stop="$dispatch('closemodal');"
        role="dialog"
        aria-modal="true"
        class="fixed inset-0 overflow-y-auto"
    >
.. modal content
</div>

然后在其他地方你有你的按钮

<button onclick="$dispatch('closemodal');">close</button>

编辑：根据您的反馈，还有其他方法可以实现您正在尝试做的事情...不确定您的isOpen（）函数如何获得正确的值以返回，但您的div可以侦听该按钮以引发自定义的closemodal事件...例如调用您的isOpen函数并传入状态，但您得到了这样的想法？<div x-on:closemodal.window="isOpen(false)">基本上与您要求的相反：Alpine侦听来自JavaScript调用。

赞(0）回复(0）举报 2023-01-06

我来回答

laravel 从javascript调用AlpineJS函数

1条答案

相关问题

热门标签

最新问答