是否可以在段落标签上模拟V模型输入行为？

发布于 2025-01-30 15:48:19 字数 1229 浏览 0 评论 0原文

解决方案：

多亏了@Jeronimas，我发现了如何在VUE中使用动态组件。基本上，您可以创建一个Child Component，该组件>在＆lt; p＆gt;和＆lt; input＆gt;标签之间，取决于props。为此，您必须使用＆lt; component＆gt;元素，因为它是管理动态组件的固有的VUE组件。

儿童 ：

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

原始问题：

是否可以将文本输入到＆lt; p＆gt;标签中，以便将其存储在数据库中？我想构建一个类似于WordPress/WebFlow的“实时” CMS，并使用格式＆lt; input＆gt;字段而不是＆lt; p＆gt;/＆lt; h＆lt; h＆gt; ;元素将使HTML混乱，因为，基本上您必须创建两个相同的站点，一个带有普通文本标签的站点和带有输入字段的可编辑标签，看起来像普通的文本标签。

我想知道是否有一种方法可以操纵反应性对象，例如ref使之成为可能？

另外，您可以在没有普通文本标签的情况下完全创建一个站点，而是使用输入字段占位符，但这可能会弄乱SEO。

原文

Solution:

Thanks to @Jeronimas I figured out how to use dynamic components in vue. Basically you create a child component that switches between <p>and <input> tags, depending on props. You have to use <component> element for this, because it's an inherent vue component to manage 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 is awesome <3.

Original Question:

Is it possible to input text into <p> tags, so that it will be stored in a database? I want to build a "live" CMS, similar to wordpress/webflow and using formatted <input> fields instead of <p>/<h> elements would make the html messy because, basically you would have to create two identical sites, one with normal text tags and the editable one with input fields, that look like normal text tags.

I was wondering if there is a way to manipulate reactive objects like ref to make it possible?

Alternatively you could create a site completely without normal text tags and instead use input field placeholders but that might mess up SEO.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拍不死你 2025-02-06 15:48:19

就像上面的评论中使用：IS在状态之间切换时可以工作。

＆lt; component：is =“ tag”＆gt;

tag值可能是动态的，并且取决于tag值，组件将改变其状态。

我建议使用div与v-html在live模式中以及用户在编辑模式显示丰富的文本字段。对于丰富的文本编辑，我建议您查看 https://tiptap.dev/ 您可以绑定输入值，tiptap将创建您需要的任何HTML标签，您需要＆lt; p/＆gt;，let; li/gt;，＆lt; h1/＆gt;