CODEWITHSUNDEEP
laravel-livewirealpine.js
Petro Gromovo
Petro Gromovo

Reputation: 2171

How to use Livewire component inside of javascript?

Looking at docs https://laravel-livewire.com/docs/2.x/events#from-js working with Livewire component inside of javascript

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

I do not see what Livewire is ? Declared var ? How can I get it. I need from JS code get value of some var and run component method. How can I do it?

Modified Block # 2:

Defining in template of my component :

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

In method of my alpinejs component I do

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)

In my component I have defined :

namespace App\Http\Livewire\Admin;

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

I just try to get value of $updateMode in JS getSubmitLabel function...

Thanks!

Upvotes: 1

Views: 8180

Answers (2)

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

To answer your question where the livewire global object is comming from: you injected livewire scripts in the body of your layout:

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

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

The livewire global object is available via window.Livewire. The method you are looking for is probably

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

Make sure that the livewire object is actually available when you are calling this method.

For all available methods see https://laravel-livewire.com/docs/2.x/reference

To get a component in javascript try:

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

Upvotes: 3

Sarthak Raval
Sarthak Raval

Reputation: 1291

Livewire recommends that you use AlpineJS for most of your JavaScript needs, but it does support using tags directly inside your component's view.

<!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>

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

Upvotes: 0

Related Questions