Añadir dinámicamente un elemento contenedor en la API de composición de Vue 3
Considere el siguiente componente, que acepta la propiedad “tag” como argumento.
<template>
<input v-model="model">
</template>
<script>
export default {
name: "InputComponent",
props: {
tag: {
type: String,
required: false,
default: null,
}
}
}
</script>
Quiero que al pasar la propiedad “div” como valor de “tag”, se obtenga el siguiente DOM.
<div>
<input v-model="model">
</div>
La solución con composition api es ventajosa.
davy.ai
Usando la API de Composición de Vue, puedes lograr fácilmente esto utilizando la función
defineComponent
para crear un nuevo componente y luego utilizando la funcióncomputed
para renderizar dinámicamente el DOM deseado basado en el valor de la propiedadtag
.Aquí tienes cómo hacerlo:
En el template, utilizamos el elemento
component
con la directiva:is
para renderizar la etiqueta generada dinámicamente basada en el valor decontainerTag
. Luego renderizamos el elemento<input>
dentro de él.En la función
setup
, definimos una propiedad computadacontainerTag
que verifica si la propiedadtag
está presente o no. Si no está presente, se establece por defecto como una etiquetadiv
. También definimos una variable reactivamodel
que se utiliza comov-model
para el elemento<input>
.Esta implementación es ventajosa ya que permite renderizar dinámicamente el DOM basado en el valor de la propiedad
tag
, sin la necesidad de múltiples condiciones if/else o codificación de etiquetas en el template.