0

actualmente tengo un componente de VUE con una sección "Descripción" que se muestra siempre aunque no haya una descripción, me gustaría ocultar eso pero actualmente le pasamos el HTML directamente al componente VUE usando slot, no sé cómo detectar eso.

Mi componente VUE:

<div class="align-items-center mt-5">
    <h4>Description</h4>
    <slot></slot>
</div>

La forma en la que lo uso:

        <webinar
          :all=".."
        >
            {!! $data['html-description'] !!}
        </webinar>

Creo que no sería posible/buena idea, pasar el html como atributo, pero este caso podría hacr un v-if y no mostrar la sección si no hay HTML. ¿Cuál sería la forma en este caso?

1 respuesta 1

0

Una de las formas más sencillas de resolver esto es generando una variable booleana o un atributo computado que te indique si debe mostrarse o no utilizando un 'v-if'. Por lo general se aplica al componente, ejemplo:

<webinar v-if="mostrarDescripcion"
   :all=".."
>

</webinar>

Las condiciones de muestra o no dependerá de tu caso.

3
  • Lo pensé, pero no sabía si era buena solución o más bien un "parche".
    – Carlos
    Commented el 24 feb. 2023 a las 12:10
  • Estoy viendo esta solución, pero no he podido hacerla funcionar. Qué opinas? codepen.io/Kradek/pen/LygKjO?editors=1010
    – Carlos
    Commented el 24 feb. 2023 a las 12:12
  • Si le doy un nombre a mi slot dentro del componente de vue, para luego pasarle los datos desde el HTML debo indicar el nombre del slot?
    – Carlos
    Commented el 24 feb. 2023 a las 12:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.