时间戳

首页 > 解决方案 > livewire 快速入门不起作用

laravel-8 - livewire 快速入门不起作用

问题描述

我正在尝试执行 Livewire Quickstart。我已正确安装所有内容并复制了示例中显示的代码，动态行为对我不起作用。也就是说，我不知道它是否加载了 Javascript，因为控制台中没有出现任何内容。

的HTML：


    @livewireStyles
        </head>
    
        <body>
    
    <livewire:counter/>
    
    @livewireScripts      
        </body>
    </html>

班上：

 class Counter extends Component
    {
        // cual propiedad puede accederse por el componente..
        public $count=0;
    
        public function increment()
        {
    
            $this->count++;
        }
    
        public function render()
        {
            return view('livewire.counter');
        }
    
      
    }

按钮：

<div class="inline-block mr-2 mt-2">
                    {{-- wire: evento que se espera... ='metodo al que llama' --}}
                   <button wire:click="increment" type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-500 hover:bg-green-600 hover:shadow-lg">Aumentar</button>
</div>

它不适用于我php artisan serve创建的虚拟服务器或我创建的虚拟服务器，如果路径错误，我也会转录：

<VirtualHost *> DocumentRoot "C:\xampp\htdocs\cursos\public" ServerName cursos.test <Directory "C:\xampp\htdocs\cursos\public "> 选项全部 AllowOverride All 要求全部授予

谢谢

标签： laravel-8laravel-livewire

解决方案

在 counter 的 Blade 文件中将其包装成单个 div 元素

<div>
<button wire:click="increment" type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-500 hover:bg-green-600 hover:shadow-lg">Aumentar</button>
</div>

在 Counter 组件中将 count 变量初始化为 0

public $count = 0

推荐阅读