How to make an input component in livewire that uses wire:model and returns data to parent component?

Question

I'd like to create an input component that can do data binding. I haven't found many answers on this. I know that in Vue 2, you can make an input component bindable by writing the following:

<template>
   <input :value="value" @input="$emit('input', value)"></input>
</template>

I'm trying to achieve something similar in Livewire. So far, all examples shown have used a bare . I'm looking to have the following:

My input component:

<div class="px-4">
@isset($label)
    <label for="{{ $for  }}"
           class="block mb-2 text-sm font-medium text-gray-400 dark:text-gray-300">{{ $label }}</label>
@endisset

<input type="text" id="{{ $for  }}"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
       placeholder="{{ $placeholder ?? '' }}" required wire:model="value">

My form:

<div>
<form wire:submit.prevent="save">
    @csrf
    <livewire:components.form.form-input for="question" label="What is your question?" wire:model.lazy="text">
        <x-slot:label>
            <em>What is your question?</em>
        </x-slot:label>
    </livewire:components.form.form-input>

    <div class="my-4">
        <div class="text-3xl">Options</div>
    </div>

    <livewire:components.button type="submit" text="Submit"></livewire:components.button>
</form>

The form uses my "form-input" component and passes a "wire:model.lazy" argument. When I enter text into the input component, it updates the "value" property within the component. However, it doesn't update the parent "Question-Form".

I've looked into events, but I've had trouble emitting the input value back to question form properly. Any ideas?

Yinci · Accepted Answer · 2022-10-19 05:21:51Z

1

The Livewire docs are extremely clear that you should not use Livewire components for extracting Blade snippets.

You've made a separate component for a singular input. You already explained what's happening. Instead, convert your input component into a Blade component or part. Then it will instead use the main Livewire component to set the form values.

In the case you want to continue with this structure (really not recommended), you can use emitUp in your updated method, to emit the saved value to the parent.

answered Oct 19, 2022 at 5:21

Yinci

2,5901 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Haven Over a year ago

I don't understand why a nested blade component can be more reactive than a nested livewire component. The docs don't go as much into depth on this as necessary.

Yinci Over a year ago

@DanielHaven When you have a Blade component, you should see it as being rendered directly into the Livewire component. It's not separate when it's rendered. It only looks like that in the code so you can keep reuse parts and keep your files organized. When you use a Livewire component, you're creating a new Livewire instance. It tracks its state independently of its parent component. You only really want to do this if you have a reusable child component that requires its own logic without wanting to update the whole parent, such as a table with reactive rows.

Collectives™ on Stack Overflow

How to make an input component in livewire that uses wire:model and returns data to parent component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related