I have an input field which sits inside a template. This input field is only displayed if the user selects “other” from another select element. I was able to use alpine.js to conditionally display the input field, but the wire:model
does not seem to properly sync the input to my PHP class. I am using the same input component with inputs that are not in the template and they are working just fine.
Are you using the latest version of Livewire: Yes.
Do you have any screenshots or code examples:
<template x-if="showOtherInput">
<x-input-section id="otherVenue" placeholder="Please Enter the Venue Name" />
</template>
My input-section
component:
@props(['id', 'type' => 'text', 'required' => false, 'disabled' => false])
<div class="w-full md:w-5/6 mb-5">
<input
type="{{ $type }}"
id="{{ $id }}"
name="{{ $id }}"
wire:model.defer="{{ $id }}"
{!! $attributes->merge(['class' => 'appearance-none block w-full bg-gray-50 text-gray-700 border border-gray-200 py-5 px-6 leading-tight focus:outline-none focus:bg-white focus:border-gray-500']) !!}
{{ $disabled ? 'disabled' : '' }} {{ $required ? 'required' : '' }} />
@error($id)
<p class="mt-2 text-sm leading-tight text-red-700">{{ $message }}</p>
@enderror
</div>