Tag: ALPINE.JS
Estoy tratando de escuchar el evento “window.onscroll” para habilitar la carga perezosa de contenido en una aplicación que estoy construyendo principalmente usando “tailwind CSS” y “Alpine.js”, hasta ahora tengo este código HTML: <div class=”flex-1 flex flex-col” :style=”`height: ${window.innerHeight}px;`” data-content=””> <div class=”flex-1 flex items-stretch h-inherit overflow-y-auto”> <main class=”flex-1″> <section aria-labelledby=”primary-heading” class=”min-w-0 . . . Read more
Estoy utilizando beercss y alpinejs Necesito un menú desplegable, pero su ancho es más pequeño que su contexto. <nav class=”wrap”> <div class=”tabs alinear-derecha”> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> <a x-data=”{ active: false }”> <button @click=”active = !active”> <span>Iniciar sesión</span> <div x-show=”active” class=”dropdown”> <a> <label>Texto complementario</label> </a> </div> </button></a> </div> . . . Read more
Recibo los siguientes errores al usar la función removeData en el código a continuación. <p>Alpine Expression Error: No se pueden leer las propiedades de undefined (leyendo ‘nombre’) Expression: “datos[id].nombre” <input x-model=”datos[id].nombre” type=”texto” name=”nombre”></p> <p>Alpine Expression Error: No se pueden leer las propiedades de undefined (leyendo ‘texto’) Expression: “datos[id].texto” <input x-model=”datos[id].texto” . . . Read more
Estoy utilizando Alpine JS en un proyecto de MVC .NET Core 6. He cargado el archivo alpine js desde https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js. Luego agregué el siguiente código en el archivo Home/Index.cshtml. <form id=”myForm” x-data=”createFormComponent()” x-on:submit.prevent=”onSubmit”> <input id=”email” type=”text” name=”email” x-model=”email”> <span class=”error” style=”display: none” x-show=”error” x-text=”error”></span> <button type=”submit”>Submit</button> </form> @section Scripts { . . . Read more
Tengo un selector de fechas dentro de un componente Livewire que estoy configurando su valor a través de JavaScript, ya que el selector de fechas de Bootstrap no actualiza automáticamente el valor: $(‘.datepicker’).datetimepicker({ format: ‘DD/MM/YYYY’, icons: { time: “fa fa-clock-o”, date: “fa fa-calendar”, up: “fa fa-chevron-up”, down: “fa fa-chevron-down”, previous: . . . Read more