Laravel Livewire 中是否有允许将 html 元素的 value 属性传递给函数的函数？答案

【问题标题】：Is there a function in Laravel Livewire that allows the value property of a html element to be passed into a function?Laravel Livewire 中是否有允许将 html 元素的 value 属性传递给函数的函数？
【发布时间】：2021-09-26 02:25:46
【问题描述】：

Laravel Livewire 中是否有允许将 html 元素（无论是单选按钮、复选框、下拉列表还是文本框）的 value 属性传递给函数的函数？

例如：我在一个页面上有一个列表。这份清单包括不同的熟食。我通过单击从列表中选择一道菜并传递了值。这个值可以传入函数吗？

LiveWire 控制器

    
    <?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    
    class Dishes extends Component
    {
    
        public function showRecipe($value)
        {
            //query database or some conditional logic
        }
    
    
        public function render()
        {
    
                return view('livewire.dishes')
    
        }
    
    }

LiveWire 组件

    <div>
    <ul>
        <li value="pizza" wire:click="showRecipe(this.value)">Pizza</li>
        <li value="cherry_pie" wire:click="showRecipe(this.value)">Cherry Pie</li>
        <li value="beef_stronganoff" wire:click="showRecipe(this.value)">Beef Stroganoff</li>
        <li value="caesar_salad" wire:click="showRecipe(this.value)">Caesar Salad</li>
        <li value="lobster_newburg" wire:click="showRecipe(this.value)">Lobster Newburg</li>
    </ul>
    </div>

【问题讨论】：

标签： laravel-8 laravel-livewire

【解决方案1】：

value 不是<li> 标记上的有效属性。但是，您可以放置一个带有“防止默认”操作的锚标记，或者只是将wire:click 保留在li 上并将数据直接传递给方法。

<div>
    <ul>
        <li wire:click="showRecipe('pizza')">Pizza</li>
        <li wire:click="showRecipe('cherry_pie')">Cherry Pie</li>
        <li wire:click="showRecipe('beef_stronganoff')">Beef Stroganoff</li>
        <li wire:click="showRecipe('caesar_salad')">Caesar Salad</li>
        <li wire:click="showRecipe('lobster_newburg')">Lobster Newburg</li>
    </ul>
</div>

如果你使用 PHP/blade 在循环中生成它，你应该在它上面使用wire:key。密钥应该是唯一的，以便 Livewire 可以跟踪每条记录。

<div>
    <ul>
        @foreach([
            'pizza' => 'Pizza',
            'cherry_pie' => 'Cherry Pie',
            'beef_stronganoff' => 'Beef Stroganoff',
            'caesar_salad' => 'Caesar Salad',
            'lobster_newburg' => 'Lobster Newburg',
        ] as $value=>$name)
            <li wire:key="dish-{{ $loop->index }}" wire:click="showRecipe('{{ $value }}')">{{ $name }}</li>
        @endforeach
    </ul>
</div>

【讨论】：