nl2br-render

by huigo

HTML

<script src="https://unpkg.com/vue@next/dist/vue.js"></script>

<div id="app">
  <textarea v-model="message" rows="6"></textarea>
  <nl2br tag="p" :text="message"></nl2br>
</div>

JavaScript

Vue.component('nl2br', {
  functional: true,
  props: ['tag','text'],
  render: function (createElement, context) {
  	return createElement(context.props.tag,
    context.props.text.split("\n").reduce(function(x,y){
    	if (!Array.isArray(x)){
      	return [x,createElement('br'),y];
      }
    	return x.concat([createElement('br'),y]);
    }))
  }
});

new Vue({
  el: '#app',
  data: {
    message: "<strong>aaa!</strong>\n\nbbb"
  }
});