Laravel Livewire中是否有一个函数允许将html元素的value属性传递到函数中

Question

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

例如：我在一个页面上有一个列表。这份清单包括不同的烹饪菜肴。我从列表中选择一道菜，点击它并传递值。这个值可以传递到函数中吗？

LiveWire控制器

<?php

namespace AppHttpLivewire;

use LivewireComponent;

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>

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