javascript - 是否可以在段落标签上模拟 v-model 输入行为?

解决方案:

感谢@Jeronimas,我想出了如何在 vue 中使用 dynamic components 。基本上,您创建一个 child component,它在 <p><input> 标记之间切换,具体取决于 props。您必须为此使用 <component> 元素,因为它是管理 dynamic components 的固有 vue 组件。

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 很棒 <3。

原始问题:

是否可以将文本输入到 <p> 标记中,以便将其存储在数据库中?我想构建一个“实时”CMS,类似于 wordpress/webflow 并使用格式化的 <input> 字段而不是 <p>/<h> 元素会使 html 变得混乱,因为基本上你必须创建两个相同的站点,一个带有普通文本标签,另一个带有输入字段,看起来像普通文本标签。

我想知道是否有一种方法可以操纵像 ref 这样的反应性对象以使其成为可能?

或者,您可以创建一个完全没有普通文本标签的网站,而是使用输入字段占位符,但这可能会扰乱 SEO。

回答1

就像上面的评论一样,使用 :is 可以在状态之间切换时起作用。

<component :is="tag">

tag value 可以是动态的,并且根据 tag value 组件将改变其状态。

我建议在 live 模式下使用 divv-html 支持任何标记,并且当用户处于 editing 模式时显示富文本字段。对于富文本编辑,我建议查看 https://tiptap.dev/ 您可以绑定输入 value 并且tiptap 将创建您需要的任何 html 标签 <p/>, <li/>, <h1/>