Laravel火线:根据第一个字段值更新文本字段

ie3xauqp  于 2022-11-18  发布在  其他
关注(0)|答案(2)|浏览(185)

我很难理解livewire是如何工作的。
我有两个文本字段。一个是用户输入前缀等信息的地方,第二个字段带有read-only属性,数据将基于第一个字段的值显示。但由于某种原因,我无法填充第二个字段。互联网上的所有示例都是如何获取值并返回它或生成下拉菜单。
我的blade模板:

<div class="mb-3">
     <label for="exampleFormControlInput1" class="form-label">prefix</label>
     <input  wire:change="testing"
             type="text"
             class="form-control"
             id="prefix"
             name="prefix"
     />
 </div>
 <div class="mb-3">
     <label for="exampleFormControlInput1" class="form-label">Code</label>
     <input  wire:model="part"
             type="text"
             class="form-control"
             id="part"
             name="part"
             value="{{ $part }}"
     />
 </div>

以及Livewireclass

class DoSomethingClass extends Component
{
    public $prefix;
    public $part;

    public function testing()
    {

        $this->part = $this->prefix;
    }

    public function render()
    {
        return view('livewire.blade-template');
    }
}
ubof19bj

ubof19bj1#

您应该使用wire:model两个输入字段。然后,如果您想更新第一个输入字段的第二个字段,您可以使用Livewire Lifecycle来更新它。

public $prefix;

    public $part;

    public function updatedPrefix()
    {
        $this->part = $this->prefix;
    }

有关updatedPrefix()挂接的信息,请查看此链接:https://laravel-livewire.com/docs/2.x/lifecycle-hooks
(You我也可以选择使用testing()方法,但是您仍然需要对第二个输入使用wire:model指令。)

unguejic

unguejic2#

您可以通过将wire:model="prefix"添加到第一个input(如上所述)来使您正在执行的操作生效。

<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">prefix</label>
    <input  wire:change="testing"
            type="text"
            class="form-control"
            id="prefix"
            name="prefix"
            wire:model="prefix"
    />
</div>
<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Code</label>
    <input  wire:model="part"
            type="text"
            class="form-control"
            id="part"
            name="part"
            value="{{ $part }}"
    />
</div>

组件本身可以保持不变。当有人在第一个字段中键入任何内容,然后按Tab键或点击离开时,它将更新第二个字段。
如果希望第二个字段在用户键入时更新为wire:keydown="testing",则它将在每次击键时进行调用。

<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">prefix</label>
    <input  wire:keydown="testing"
            type="text"
            class="form-control"
            id="prefix"
            name="prefix"
            wire:model="prefix"
    />
</div>
<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Code</label>
    <input  wire:model="part"
            type="text"
            class="form-control"
            id="part"
            name="part"
            value="{{ $part }}"
    />
</div>

如上所述,如果您使用updatedPrefix()方法,则不需要wire:changewire:keydown,因为Livewire会在用户键入时更新字段。

相关问题