Agregar dos x-data en un div usando Alpine

En este artículo aprenderemos a Agregar dos x-data en un div, es decir declarar dos propiedades en un componente x-data usando alpine y tailwind. Mostraremos un ejemplo completo con la solución.

x-data .- Define un trozo de HTML como un componente en Alpine y proporciona los datos reactivos para que ese componente sea referenciado.
💣 Descarga sistemas PHP y Laravel COMPLETOS GRATIS
Recursos premium listos para usar en proyectos reales 💻
👥 +1000 desarrolladores · 🔥 Publicaciones diarias
🔥 Unirme al canal GRATIS ahora 👥 Grupo de Facebook
⏳ Enlaces disponibles por tiempo limitado
💻 Sistemas completos 🔌 Plugins PRO ⚡ Scripts listos 🔥 Recursos exclusivos

He aquí un ejemplo de un componente de desplegable como modo ejemplo:

<div x-data="{ open: false }">
<button @click="open = ! open">Toggle Contenido</button>

<div x-show="open">
      Contenido..
</div>
</div>

No te preocupes por las otras directivas en este ejemplo ( @clicky x-show), llegaremos a ellos en un momento. Por ahora, acerquémonos en x-data.

Tabla de contenidos

Agregar dos x-data en un div usando Alpine

Si estas intentando aprender AlpineJS con HTML. Es muy fácil la manera de ocultar o mostrar un div. Sin embargo, el detalle esta cuando se intenta hacer que dos elementos X-DATA del mismo div desaparezcan.

Veamos un ejemplo completo

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página de Ejemplo</title>
</head>
<body>
    <div
        x-data="{ isOpen: true, isOpen2: true }">
        <button @click="isOpen = !isOpen" class="bg-slate-300 border-black border-4 mt-5">BUTTON 1</button>
        <br>
        <button @click="isOpen2 = !isOpen2" class="bg-slate-300 border-black border-4 mt-5 mb-5">BUTTON 2</button>
        <h1 x-show="isOpen">TEXT 1</h1>
        <h1 x-show="isOpen2">TEXT 2</h1>
    </div>
</body>
</html>

Doble propiedad en un X-DATA Alpine

En Resumen. Se puede declarar múltiples x-data en un solo DIV usando la metodología de un array, veamos un ejemplo

<div
        x-data="{ isOpen: true }"
        x-data="{ isOpen2: true }">

La sintaxis anterior no funcionara porque se está duplicando el componente x-data, la solución seria anidad en un array los valores a utilizar. A continuación, observemos la solución.

<div
        x-data="{ isOpen: true, isOpen2: true }">

Si observamos el código anterior vemos que en el DIV solo hay un componente X-DATA con dos propiedades: isOpen y isOpen2. Esto funcionara de manera exitosa.