Laravel Livewire：Jquery不能在livewire组件中工作

tyu7yeag 于 2023-05-17 发布在 jQuery

关注(0)|答案(2)|浏览(219)

我可以在视图中使用jquery，但不能在livewire组件中使用。

这是我的livewire组件，我想使用Jquery：\resources\views\livewire\search.blade.php

<div>
    <h1 id="id">Test</h1>
    <script>
        $('#id').css("background-color", "red");;
    </script>
</div>

这是我的视图：\resources\views\components\sections\search.blade.php

@livewire('forms.search')

这是我的app.js：\resources\js\app.js

import $ from 'jquery';
window.$ = $;

\resources\views\components\sections\search.blade.php

<h1 id="id">Test</h1>
<script>
    $('#id').css("background-color", "red");;
</script>

对此有两种选择。你可以先给livewire blade的父标记wire：ignore。第二种选择：
在Livewire的render函数中添加以下代码

$this->dispatchBrowserEvent('jquery');

然后像这样运行

window.addEventListener('jquery', event => {
        $('#id').css("background-color", "red");;
    });

此外，请确保运行此命令

npm run watch

之后，确保在刀片文件中包含public/js/app.js文件
和

@livewireScripts
</body>

确保代码写好了

你可以从cdn添加jquery js文件到你的“app.blade.php”文件中。就像这样：

<script src="https://code.jquery.com/jquery-3.6.4.min.js" ...
    @livewireScripts
</body>