Gracias a @Jeronimas descubrí cómo usar dynamic components en vue. Básicamente, crea un child component que cambia entre las etiquetas <p> y <input> , según los props . Debe usar el <component> para esto, porque es un componente inherente de vue para administrar dynamic components .
child :
<template> <input v-if="input" type="text" value="hello world"> <p v-else>hello world</p> </template> <script setup> const props = defineProps({ input: Boolean }) //emit input when form is submitted... </script> parent :
<template> <component :is="p" :input="true"/> </template> <script setup> import p from './p.vue' </script>Vue es increíble <3.
¿Es posible ingresar texto en etiquetas <p> , para que se almacene en una base de datos? Quiero construir un CMS "en vivo", similar a wordpress/webflow y usar campos <input> formateados en lugar de elementos <p> / <h> haría que el html se desordenara porque, básicamente, tendría que crear dos sitios idénticos, uno con etiquetas de texto normales y la editable con campos de entrada, que parecen etiquetas de texto normales.
Me preguntaba si hay una manera de manipular objetos reactivos como ref para hacerlo posible.
Alternativamente, podría crear un sitio completamente sin etiquetas de texto normales y, en su lugar, usar marcadores de posición de campo de entrada, pero eso podría estropear el SEO.
Como en el comentario anterior, usar :is podría funcionar al cambiar entre los estados.
<component :is="tag">
el valor de la tag podría ser dinámico y, dependiendo del valor de la tag , el componente cambiaría su estado.
Sugeriría usar div con v-html que admita cualquier marcado cuando esté en modo en live y cuando el usuario esté en modo de editing muestre un campo de texto enriquecido. Para la edición de texto enriquecido, sugeriría mirar https://tiptap.dev/ , puede vincular el valor de entrada y tiptap crearía las etiquetas html que necesita <p/>, <li/>, <h1/>