[Vuejs]-Is it valid to provide to v-for unclosed tags for iteration in vue.js?

by

0👍

Html will get sanitize the Html part. So it is not a good idea. to do such things.
Html should be kept in template of vue.
But let say you wanted to show some data in

tag. Instead of doing use computed prop and hide and show p tag. It also prevents the incomplete tag issue.

I am attaching jsfiddle solution[

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

Leave a comment