向 v-for 提供未闭合标签用于 vue.js 中的迭代是否有效?

Question

假设，我有这样的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>

items- 这是一个用于标签编辑器contenteditable解析(我尚未解析(字符串。

如果这无效，可能是什么解决方法？

上。

items是一个 json，我将从数据库中获取，它应该作为用户输入保存到数据库中contenteditablediv 编辑器。

Answer 1

Html将清理 Html 部分。所以这不是一个好主意。做这样的事情。 Html 应该保存在 vue 的模板中。 但是，假设您想在标记中显示一些数据

。而不是使用计算的道具并隐藏和显示 p 标签。它还可以防止不完整的标记问题。

我正在附加 jsfiddle 解决方案[

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
items: [
{
value: '<p>this is first part of paragraph'
},
{
value: 'componentName',
isComponent: true,
},
{
value: 'this is the last part of paragraph</p>'
},
],
},
computed:{
dataVal(){
let val = "";
for(let i=0;i<this.items.length;i++){
val += this.items[i].value + " "
}
return val;
}
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-html="dataVal">
</div>

]1