Livewire - 嵌套组件 - 内联 javascript 不起作用答案

【问题标题】：Livewire - Nesting components - inline javascript not workingLivewire - 嵌套组件 - 内联 javascript 不起作用
【发布时间】：2021-04-20 06:02:42
【问题描述】：

说明

我有一个“父子”的情况，我正在尝试使用 Livewire。我的问题是在子组件上编写的任何内联 Javascript 都不起作用。

重现的具体步骤

考虑Master和Child这两个组件：

<!-- master.blade.php -->
<div>
    <a wire:click="$set('task', true)">Open Task</a>
    @if($task)
        <livewire:test.child :task="$task"></livewire:test.child>
    @endif
</div>

//Master.php
class Master extends Component
{
    public $task;

    public function render()
    {
        return view('livewire.test.master');
    }
}

在上面的主组件中，每当我点击“打开任务”时，$task 变量将被设置为 true。这将使child 组件呈现。子组件如下所示：

<!-- child.blade.php -->
<div class="p-4">
    The task is set.<br />
    <a onclick="showName('Test Task')">Show task</a>

    <script type="text/javascript">
        function showName(name){
               alert("Task name is: " + name);
        }
    </script>
</div>

//Child.php
class Child extends Component
{
    public $task;

    public function render()
    {
        return view('livewire.test.child');
    }
}

在子项中单击Show Task 时，出现以下错误：

Uncaught ReferenceError: showName is not defined at HTMLAnchorElement.onclick (:2:1)

此外，在子组件上，我想知道 Livewire 何时完成对该特定组件的加载，因此添加以下内容。（如记录的here）

//child.blade.php
document.addEventListener('livewire:load', function () { 
    console.log("Livewire finished loading in child.")
});

上述内容也从未被解雇。

上下文

高山版本：2.7.3
Livewire 版本：2.3.6
Laravel 版本：8.12
浏览器：Chrome

【问题讨论】：

标签： php laravel laravel-livewire

【解决方案1】：

在子组件上，您必须有一个 mount 函数，该函数必须有一个名为 $task 的参数。试试这个：

class Child extends Component
{
    public $task;

    public function mount($task){
        $this->task  = $task
    }
    public function render()
    {
        return view('livewire.test.child');
    }
}

【讨论】：