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

Question

解决方案：

感谢@Jeronimas，我知道了如何在 vue 中使用 dynamic components。基本上，您创建一个 child component，它根据 props 在 <p> 和 <input> 标签之间切换。你必须为此使用 <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。

Answer 1

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

<component :is="tag">

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

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

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

Is it possible to emulate v-model input behaviour on a paragraph tag?

html

javascript

vue.js

vuejs3

解决方案：

原问题：