CODEWITHSUNDEEP
laravellaravel-livewire
Daniel Haven
Daniel Haven

Reputation: 346

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

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?

Upvotes: 1

Views: 5081

Answers (1)

Yinci
Yinci

Reputation: 2480

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.

Upvotes: 1

Related Questions