为什么 Laravel-livewire 'wire:model' 不起作用？答案

【问题标题】：Why Laravel-livewire 'wire:model' not working?为什么 Laravel-livewire 'wire:model' 不起作用？
【发布时间】：2021-03-11 01:45:04
【问题描述】：

我正在使用 Laravel 8。

我的 Livewire 控制器

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class SearchDropdown extends Component
{
    public $search = 'hello there';
    public function render()
    {
        return view('livewire.search-dropdown');
    }
}

活线刀片

<div class="relative mt-3 md:mt-0">
    <input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
    <div class="absolute top-0">
        <svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
    </div>
    <div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
        <ul>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">{{ $search }}</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
        </ul>
    </div>
</div>

我已将 Livewire 包含在我的 main.blade 文件中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Movie App</title>

    <link rel="stylesheet" href="{{ URL::asset('/css/main.css') }}">
    <livewire:styles />
</head>

这在正文结束之前

<livewire:scripts />

现在，当我在搜索框中写东西时，它应该在我写的时候更新，但它没有更新，而是显示“你好”——$search 变量的初始值。

附注：这就是它在我的浏览器中显示的内容。由于某种原因，livewire.js 出现错误。如何解决这个问题？

【问题讨论】：

尝试清除缓存，php artisan optimize:clear
那行不通。不过感谢您的评论。不知道我可以清除缓存。

标签： laravel laravel-livewire

【解决方案1】：

我遇到了同样的问题，通过添加解决了它

 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

在主布局文件中，因为显然它没有。

【讨论】：

【解决方案2】：

我听从了@Kamlesh Paul 的建议，它奏效了。

你需要设置livewire base url

在 config/livewire.php 中

'asset_url'  =>  env('APP_URL', 'http://localhost'),

然后在 .env 中

APP_URL=your_app_url

【讨论】：

【解决方案3】：

添加

@livewireStyles
        <link rel="stylesheet"
            href="{{ mix('css/app.css') }}">

和

<script src="{{ mix('js/app.js') }}"></script>
        @livewireScripts

在你的主布局文件中，我认为它应该可以工作

【讨论】：

【解决方案4】：

尝试在 Livewire 刀片中使用 div 和 container 类包装您的内容。

<div class="container">
<div class="relative mt-3 md:mt-0">
    <input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
    <div class="absolute top-0">
        <svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
    </div>
    <div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
        <ul>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">{{ $search }}</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
        </ul>
    </div
</div>

【讨论】：