时间戳

首页 > 解决方案 > 在 vue.js 中提供给 v-for 用于迭代的未闭合标签是否有效？

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

问题描述

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

itemscontenteditable- 它是标签编辑器的已解析（我尚未解析）字符串。

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

UPD。

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

标签： vue.js

解决方案

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

推荐阅读