12. Select

Marcar esta unidad como culminada

Tema anterior Siguiente tema

6 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

Mitz hace 4 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 4 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 4 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 4 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 4 meses
- Mitz hace 4 meses
  
  aqui en esta foto como me sale el codigo
Mitz hace 4 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 4 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.
Felipe Ahumada hace 5 meses

Hola Gente consulta realice un “composer update” y el buscador del select con las api desapareció, alguien le a pasado algo similar o sabe el problema.??

Emilio López hace 10 meses

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 7 meses

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.