12. Select

Marcar esta unidad como culminada

Tema anterior Siguiente tema

6 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

Gustavo hace 6 meses

Hola Víctor. ¿Quería saber si me puedes ayudar con un código usando Laravel 12, Livewire3 y WireUI 2? Es simple pero estoy trancado. Quiero seleccionar de la base de datos los estados de un país y colocarlos en un select de wireui y que al seleccionar el estado lea en la base de datos los municipios que le corresponden para que los seleccione en otro select de wireui. Dime cuánto me cobras. Gracias.
- Victor Arana Flores hace 6 meses
  
  Hola Gustavo, claro. Si estás necesitando asesorías personalizadas mandame un correo a victor@codersfree.com y me pondré en contacto contigo.
- Gustavo hace 6 meses
  
  Ese problema ya lo resolví, pero cada paso que adelanto, hago las cosas iguales a las que había hecho y fallan. Ya te mandé el correo
Mitz hace 11 meses

bueno la pregunta es que al realizar el select el select para hacer la busqueda sale corrido a la derecha no como en tu video ,comparo el codigo y no tengo error al igual que esta leccion,por eso te lo envie
- Victor Arana Flores hace 11 meses
  
  ¿El select se pone siempre a la derecha o es dentro del diseño que estas creando que se pone a la derecha?
  
  Si es lo primero, te recomiendo que verifiques que hayas importado correctamente los activos de wire ui, como explique al principio, que ejecutes npm run build, y de ser posible limpia la cache de tu navegador.
  Si es lo segundo, te sugiero que empieces con el diseño desde el principio, y vayas depurando hasta llegar a la parte que hace que el select se vaya para la derecha.
- Mitz hace 11 meses
  
  estimado siempre sale como la foto copie los archivos suyos y nada me sale siempre asi
  use el comando npm run build y luego el php artisan optimize:clear no me abre como usted a la derecha
- Victor Arana Flores hace 11 meses
  
  Hola Mitz, revisa que wire ui este configurado correctamente en tu proyecto, además de verificar que tu diseño no este interfiriendo con el de WIRE UI.
  
  Asegurate que estes trabajando con la version estable (En este caso es la 1) si has instalado la version 2, que es una versión de prueba es posible que por eso tengas el error.
  
  En el caso de necesitar que revise tu proyecto para buscar tu posible error, te comento que ese tipo de asesoría no esta incluida por este medio. Pero si doy asesorias personalizadas. Si las necesitas escribeme a victor@codersfree.com y te paso mi tarifa :D
Mitz hace 11 meses
- Mitz hace 11 meses
  
  aqui en esta foto como me sale el codigo
Mitz hace 11 meses

hola victor ,estoy intentando cambiar de lugar el select y no he podido revise el codigo ,y nada podrias darme una ayuda <x-app-layout>

<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Formularios') }}
</h2>
</x-slot>
<x-container class="py-12">
<form actions="">
<div class="mb-4">
<x-wire.input label="Nombre"
name="name"
placeholder="Ingresa un nombre"
hint="*Ingresa tu nombre completo"
corner-hint="Ejem: Juan Perez"
icon="user"
right-icon="pencil"/>
</div>
<div class="mb-4">
<x-wire.input label="Sitio web" class=" pl-[4.3rem]"
placeholder="tu-sitio-web.com"
prefix="https://"/>

</div>

<div class="mb-4">
<x-wire.input label="Correo elctronico"
placeholder="Tu correo"
suffix="gmail.com"
class="pr-40"/>
</div>

<div class="mb-4">
<x-wire.input
class="pl-16"
placeholder="Contraseña"
>
<x-slot name="prepend">

<div class="absolute inset-y-0">
<x-wire.button
class="h-full"
icon="lock-closed"
primary
/>

</div>
</x-slot>
</x-wire.input>

</div>

<div class="mb-4">
<x-wire.input
class="pr-16"
placeholder="Contraseña"
>
<x-slot name="append">

<div class="absolute inset-y-0 right-0">
<x-wire.button
class="h-full"
icon="lock-closed"
primary
/>

</div>
</x-slot>
</x-wire.input>

</div>

<div class="mb-4">
<x-wire.inputs.password label="Contraseña"
placeholder="Escriba la Contraseña"
name="password"
/>

</div>

<div class="mb-4">
<x-wire.inputs.number label="Edad"
placeholder="Escriba el numero"
/>

</div>

<div class="mb-4">
<x-wire.textarea label="Comentario"
placeholder="Escriba su comentario"
/>

</div>

<div class="mb-4">
<x-wire.native-select
label="Pais"
laceholder="Seleccione un pais"
>
<option @selected(true)value="1">Mexico</option>
<option value="2">Colombia</option>
<option value="3">Peru</option>
<option value="4">Argentina</option>
<option value="5">Chile</option>
</x-wire.native-select>
</div>

<div class="mb-4">

<x-select
name="users[]"
placeholder="Seleccione un usuario"
label="Usuarios"
:async-data="route('api.users.index')"
option-label="name"
option-value="id"
multiselect
:template="[
'name' => 'user-option',
'config' => [
'src' => 'profile_photo_url',
]
]"
/>

</div>

</form>

</x-container>

</x-app-layout>
- Victor Arana Flores hace 11 meses
  
  Hola amigo, lamentablemente por este medio no puedo darte asesoramiento revisando tu codigo. Si tienes una pregunta puntual sobre el funcionamiento de Wire UI te pediría que lo formules en una nueva pregunta y encantado de ayudarte.

Emilio López hace 1 año

Hola Víctor, sabes cómo utilizar la directiva de blade @select en este componente? Al intentar utilizarla me manda error y no he podido mostrar los elementos seleccionados en la vista de edición. Saludos y muchas felicidades por tus cursos, son muy completos y los explicas muy bien.

Danilo hace 1 año

class EditProduct extends Component
{
	public $product, $features;
	public function mount(Product $product)
    {
    	 $this->product = $product;
    	 //Obtener solo el ID y convertilo a un arreglo.
    	 $this->features=$this->product->features->pluck('id')->toArray();
    }
}

En la vista del componente

//Es esencial utilizar la propiedad defer para el modelo
<x-select 
	name="features[]" 
	wire:model.defer="features" 
	multiselect label="Search a Feature" 
	placeholder="Select some feature" 
	:async-data="route('admin.features.select')" 
	option-label="name" option-value="id" />

Sergio Aldo Lossetti hace 1 año

Hola, estuve probando y el select no es rápido al momento de querer usarlo con un modelo de 20mil registros. Se pone lento y se traba todo el componente a diferencia de select2 que es rápido.