1

mi consulta es simple, quiero poner un control livewire Select en mi plantilla HTML para desde allí, actualizar una tabla. Tengo el Contolador, el componente Livewire y su correspondiente archivo blade, pero no lo puedo hacer funcionar, tengo errores por todos lados. Mi controlador :

    <?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use Livewire\WithPagination;
    use App\Models\Project;
    use Illuminate\Support\Facades\Auth;
    
    class Projects extends Component
    {
        use WithPagination;
    
        protected $paginationTheme = 'bootstrap';
        public $selected_id, $keyWord, $descript, $version, $active, $id_user_add, $id_user_update, $id_client;
        public $updateMode = false;
    
        public function render()
        {
            $keyWord = '%'.$this->keyWord .'%';
            return view('livewire.projects.view', [
                'projects' => Project::latest()
                            ->orWhere('descript', 'LIKE', $keyWord)
                            ->orWhere('version', 'LIKE', $keyWord)
                            ->orWhere('id_client', 'LIKE', $keyWord)
                            ->orWhere('active', 'LIKE', $keyWord)
                            ->orWhere('id_user_add', 'LIKE', $keyWord)
                            ->orWhere('id_user_update', 'LIKE', $keyWord)
                            ->paginate(10),
            ]);
        }
        
        public function cancel()
        {
            $this->resetInput();
            $this->updateMode = false;
        }
        
        private function resetInput()
        {       
            $this->descript = null;
            $this->version = null;
            $this->id_client = null;
            $this->active = null;
            $this->id_user_add = null;
            $this->id_user_update = null;
        }
    
        public function store()
        {
            
            $this->validate([
            'descript' => 'required',
            'version' => 'required',
            'active' => 'required',
            ]);
    
            Project::create([ 
                'descript' => $this->descript,
                'version' => $this->version,
                'id_client' => $this->id_client,
                'active' => ($this->active=="1" ) ? '1' : '0',
                'id_user_add' => Auth::user()->id,
                'id_user_update' => Auth::user()->id,
            ]);
            
            $this->resetInput();
            $this->emit('closeModal');
            session()->flash('message', 'Proyecto creado exitosamente.');
        }
    
        public function edit($id)
        {
            $record = Project::findOrFail($id);
    
            $this->selected_id = $id; 
            $this->descript = $record-> descript;
            $this->version = $record-> version;
            $this->id_client = $record-> id_client;
            $this->active = $record-> active;
            $this->id_user_update = $record-> id_user_update;
            
            $this->updateMode = true;
        }
    
        public function update()
        {
            $this->validate([
            'descript' => 'required',
            'version' => 'required',
            'id_client' => 'required',
            'active' => 'required',
            ]);
    
            if ($this->selected_id) {
                $record = Project::find($this->selected_id);
                $record->update([ 
                'descript' => $this-> descript,
                'version' => $this-> version,
                'id_client' => $this-> id_client,
                'active' => ($this->active=="1" ) ? '1' : '0',
                 'id_user_update' => Auth::user()->id
                ]);
    
                $this->resetInput();
                $this->updateMode = false;
                session()->flash('message', 'Proyecto actualizado exitosamente.');
            }
        }
    
        public function destroy($id)
        {
            if ($id) {
                $record = Project::where('id', $id);
                $record->delete();
            }
        }
        
    }

Mi componente :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Client;

class GetClientId extends Component
{

    public $client_data ;

    public function render()
    {
        return view('livewire.get-client-id', ['clientes' => Client::where('active', '1')->orderBy('name')->get() ]);
    }
}

Mi plantilla Blade :

<div>
   <select wire:model="id_client" class="custom-select border-1 shadow-none form-control" id="id_client">
      <option value="0">Seleccione cliente</option>
       @foreach ($clientes as $cliente )
         <option value="{{$cliente->id}}">{{$cliente->name}}</option>
       @endforeach
   </select>          
</div>

Y lo quiero usar acá :

            <div class="form-group">
                <label>Seleccione cliente del proyecto</label>
                @livewire('get-client-id')
            </div>

Si lo hago de esta forma, al navegar por las opciones del select, recibo un error : no existe la variable "$id_client" a la que apunto con el wire:model y actualiza mi tabla Projects, tal como se muestra en el controlador, si hago esto :

<select wire:model="id_client" class="custom-select border-1 shadow-none form-control" id="id_client">
      <option value="0">Seleccione cliente</option>
       @foreach ($clientes as $cliente )
         <option value="{{$cliente->id}}">{{$cliente->name}}</option>
       @endforeach
   </select>         

No me reconoce la variable $clientes. Me gustaría ver cual es la forma correcta de hacer lo que quiero, un simple Select con Livewire y que guarde el dato que necesito en mi tabla. Muchas gracias!!!

4
  • lo has conseguido?
    – Juanzu
    Commented el 5 feb. 2022 a las 23:38
  • 1
    Hola, de la manera de como dice la documentación de Livewire, no, vi tutoriales y blogs donde explican como hacerlo con select dependientes ya que selects simples no encontré nada, lo solucioné de una manera no ortodoxa, pero no me gusta, quisiera hacerlo tal cual lo dice la documentación oficial (que no dice mucho al respecto), sigo esperando respuestas. Gracias. Saludos Commented el 7 feb. 2022 a las 17:12
  • Comprendo, me podrías comentar como lo hiciste la verdad lo requiero así sea no ortodoxa.
    – Juanzu
    Commented el 12 feb. 2022 a las 19:59
  • El modelo Cliente no lo veo importado en el controlador, ni lo estas llamando en el función render, ej. que la función retorne 'clientes' => Cliente::all()
    – Criselis
    Commented el 11 abr. 2022 a las 18:27

1 respuesta 1

0

Ok, les diré como hacer un select simple con livewire y laravel 9, empecemos con nuestro componente de livewire:

public $name, $email, $password;
public $escuela_id='';

public function render()
{
    $escuelas = Escuela::all();

    return view(
        'livewire.create-docente',
        [
            'escuelas' => $escuelas
        ]
    );
}

Como podrán ver, estoy enviando a la vista la variable escuelas, eso es lo que mostraré en el select, mi variable escuela_id es la utilizaré para recuperar el valor de mi selección. Importante : Debe estar inicializada con con comillas ' '

Ahora veamos la vista de blade:

            <!----Escuelas--->
            <div class="mb-4 flex-1 mr-4">
                <x-jet-label value='Escuela' />
                <select name="" id="" wire:model='escuela_id' class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm w-full">
                    <option value="" disabled selected>Seleccione</option>
                    @foreach ($escuelas as $escuela)
                    <option value="{{$escuela->id}}">{{$escuela->descripcion}}</option>
                    @endforeach
                </select>
            </div>
            <div>Escuela: @json($escuela_id)</div>

Solo estoy mostrando el componente select de mi vista, como puede ver solo necesitan agregar al select la variable que va a comunicarse (wire:model='escuela_id').

Es importante que también tengan una etiqueta option que se encuentre desactivada y seleccionada, que es donde se inicializará cuando llamen a la vista.

<option value="" disabled selected>Seleccione</option>

Para finalizar, el último div de nuestra vista blade, mostrará el valor de la selección para que puedan comprobar la selección.

Fuentes: livewire documentacion

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.