Select
Comprar curso

12. Select


6 comentarios

Inicia sesión para comentar

Comentarios:

  • Gustavo

    Gustavo hace 1 semana

    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 1 semana

      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 1 semana

      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

    Mitz hace 5 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 5 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 5 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 5 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

    Mitz hace 5 meses

    • Mitz hace 5 meses

      aqui en esta foto  como me sale el codigo 

  • Mitz

    Mitz hace 5 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 5 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

    Emilio López hace 11 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 8 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

    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.