为vue.js中的迭代提供未关闭的标记是否有效？

假设我有这样的vue代码：

<template>
    <div v-for="(item, index) in items">
        <div v-if="item.isComponent">
            <component :is="item.value"/>
        </div>
        <template v-else>
            {{item.value}}
        </template>
    </div>
</template>

<script>
export default {
    data: function(){
        return {
            items: [

              {
                value: '<p>this is first part of paragraph
              },
              {
                value: 'componentName',
                isComponent: true,
              },
              {
                value: 'this is the last part of paragraph</p>
              },

            ],
//...
</script>

{{item.value}}
导出默认值{
数据：函数（）{
返回{
项目：[
{
值：'这是段落的第一部分
},
{
值：'componentName'，
isComponent：正确，
},
{
value:'这是段落的最后一部分

},
],
//...

items

-它是

contenteditable

标记编辑器的已解析（我还没有解析）字符串

如果这是无效的，可以采取什么解决方法

UPD.

---

items

是一个json，我将从数据库中获取该json，并将其保存到数据库中，作为用户输入到

contenteditable

div编辑器。

Html将对Html部分进行清理。因此这不是一个好主意。执行此类操作。 Html应该保存在vue的模板中。 但是假设您想在标记中显示一些数据，而不是使用computed prop和hide and show p标记。它还可以防止不完整的标记问题

我正在附加JSFIDLE解决方案[

newvue({
el:“#应用程序”，
数据：{
消息：“您好，Vue.js！”，
项目：[
{
值：“这是段落的第一部分”
},
{
值：'componentName'，
isComponent：正确，
},
{
value:“这是段落的最后一部分
”
},
],
},
计算：{
dataVal（）{
让val=”“；
对于（让我=0；我已经更新了我关于将html存储到
项目的问题。好的。也编辑了我的答案。现在试试这个->（上面一个）你正在使用
v-html=“dataVal”
这意味着我将丢失
项中的组件功能。使用
对我来说很重要。但在这种情况下，您将一个不正确的损坏Html传递给您的组件