如何在 javascript 中使用 Livewire 组件？答案

【问题标题】：How to use Livewire component inside of javascript?如何在 javascript 中使用 Livewire 组件？
【发布时间】：2021-11-07 15:01:33
【问题描述】：

查看文档https://laravel-livewire.com/docs/2.x/events#from-js 在 javascript 中使用 Livewire 组件

<script>
    Livewire.emit('postAdded')
</script>

我看不到 Livewire 是什么？声明 var ?我怎么才能得到它。我需要从 JS 代码中获取一些 var 的值并运行组件方法。我该怎么做？

修改块 #2：

在我的组件的模板中定义：

<div class="admin_page_container" id="facilities_admin_page_container">
   ...

在我的 alpinejs 组件的方法中我做

function adminFacilitiesComponent() {
    return {
        getSubmitLabel: function (component) {
            const doc = document.getElementById("facilities_admin_page_container");
            console.log('doc::')
            console.log(doc)

            var updateMode = window.livewire.find(doc.getAttribute("wire:updateMode"))
            // But I got error : index.js:31 Uncaught (in promise) TypeError: Cannot read property '$wire' of undefined
            // I see content of doc in browser's console : https://prnt.sc/1sdu4f1
            console.log('updateMode::')
            console.log(updateMode)

在我的组件中我定义了：

namespace App\Http\Livewire\Admin;

...
class Facilities extends Component
{
    ...
    public $updateMode = 'browse';

我只是尝试在 JS getSubmitLabel 函数中获取 $updateMode 的值...

谢谢！

【问题讨论】：

检查我的答案

标签： laravel-livewire alpine.js

【解决方案1】：

回答您的 livewire 全局对象来自何处的问题：您在布局正文中注入了 livewire 脚本：

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

https://laravel-livewire.com/docs/2.x/installation

livewire 全局对象可通过window.Livewire 获得。您正在寻找的方法可能是

 Livewire.emitTo(componentName, eventName, ...params)

确保调用此方法时 livewire 对象实际可用。

所有可用方法见https://laravel-livewire.com/docs/2.x/reference

要在 javascript 中获取组件，请尝试：

const doc = document.getElementById("myComponent");
window.livewire.find(doc.getAttribute("wire:id"))

【讨论】：

@PetroGromovo 你可以使用 window.livewire.find(doc.getAttribute("wire:id"))。
@PetroGromovo const doc = document.getElementById("myComponent");
@PetroGromovo 您将 id="myComponent" 添加到组件的根 div 中。
@PetroGromovo 代替wire:updateMode 使用wire:id。 Livewire 将在组件的根元素上放置一个 wire:id 。您必须引用它而不是 wire:updateMode。
@PetroGromovo 它记录在“全局 Livewire JavaScript 对象”部分的 laravel-livewire.com/docs/2.x/reference 中。 doc.getAttribute("wire:id") 只是普通的 javascript 来获取 find 方法需要的 wire:id。

【解决方案2】：

Livewire 建议您使用 AlpineJS 来满足大部分 JavaScript 需求，但它确实支持直接在组件视图中使用标签。

<!DOCTYPE html>
<html>
  <head>
     @livewireStyles
  </head>

<body>
      <p>This is My Component Call </p>
      @livewire('blog-component')

@livewireScripts
     <script>
     Livewire.emit('postAdded') //also write Javascript Hear
     
       document.addEventListener('livewire:load', function () {
        // Your JS here.
    })
     </script>

参考
https://laravel-livewire.com/docs/2.x/inline-scripts https://laravel-livewire.com/docs/2.x/reference

【讨论】：