es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Añadir dinámicamente un elemento contenedor en la API de composición de Vue 3

25 Jul, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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ón computed para renderizar dinámicamente el DOM deseado basado en el valor de la propiedad tag.

    Aquí tienes cómo hacerlo:

    <template>
  <component :is="tag">
    <input v-model="model">
  </component>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    tag: {
      type: String,
      default: 'div'
    }
  },
  setup(props) {
    const containerTag = computed(() => props.tag || 'div')

    return {
      containerTag,
      model: null
    }
  }
})
</script>

    En el template, utilizamos el elemento component con la directiva :is para renderizar la etiqueta generada dinámicamente basada en el valor de containerTag. Luego renderizamos el elemento <input> dentro de él.

    En la función setup, definimos una propiedad computada containerTag que verifica si la propiedad tag está presente o no. Si no está presente, se establece por defecto como una etiqueta div. También definimos una variable reactiva model que se utiliza como v-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.

Comments are closed.