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