Adding html in Vue.js using data filters?

Question

I am trying to use the Filter feature in Vue.js to add html tags inside a String, the documents suggests this should be somehow feasible but I'm getting nowhere. The point is the data should just a String that's brought into the html and before it's mounted the filter should search the data for key words (e.g. 'See REFERENCE') and the REFERENCE word should be turned into an anchor link.

E.g.

 <p>{{String | filterFunction}}</p>

Instead of piping out say:

 <p>The text string with a link</p>

It should pipe out the string but with a node insert.

 <p>The text string with a <a href="someLink">link</a></p>

The Vue documentation suggests javascript component assemblage is possible but so far the testing has gone poorly.

Possible duplicate of How to make links clickable in a chat, while this doesn't use a filter, it shows how to make links clickable in the way you seem to want it — Ferrybig
– Ferrybig, Commented Apr 16, 2018 at 8:15
Does the String in {{ String | filterFunction }} consist of an object or just a string? — Ru Chern Chong
– Ru Chern Chong, Commented Apr 16, 2018 at 8:16
Why not use the v-html directive? vuejs.org/v2/guide/syntax.html#Raw-HTML — Mulhoon
– Mulhoon, Commented Apr 16, 2018 at 9:58
I was hoping for a filter method for this but I guess that's not appropriate compared to the render in a functional Vue component- thanks. — Varanus
– Varanus, Commented Apr 16, 2018 at 11:06

acdcjunior · Accepted Answer · 2018-04-16 15:23:35Z

16

Filters only replace as text. Since you are trying to transform plain text in HTML, you'll have to resort to v-html or equivalent. Check your options in the demo below.

function _linkify(text) {
  return text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
}

Vue.filter('linkify', function (value) {
    return _linkify(value)
})

Vue.component('linkify', {
  props: ['msg'],
  template: '<span v-html="linkifiedMsg"></span>',
  computed: {
  	linkifiedMsg() { return _linkify(this.msg); }
  }
});

Vue.component('linkify-slot', {
  render: function (h) {
    let html = _linkify(this.$slots.default[0].text);
    return h('span',{domProps:{"innerHTML": html}})
  }
});

new Vue({
  el: '#app',
  data: {
    message: 'The text string with a http://example.com'
  },
  methods: {
    linkifyMethod(text) {
      return _linkify(text); // simply delegating to the global function
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Doesn't work: {{ message | linkify }}</p>
  
  <p v-html="$options.filters.linkify(message)"></p>
  
  <p :inner-html.prop="message | linkify"></p>
  
  <p v-html="linkifyMethod(message)"></p>
  
  <p><linkify :msg="message"></linkify></p>
  
  <p><linkify-slot>{{ message }}</linkify-slot></p>
</div>

answered Apr 16, 2018 at 15:23

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ed1nh0 Over a year ago

The third option met my needs <p :inner-html.prop="message | linkify"></p>. Thank you!

Sagive Over a year ago

same here - the third options works as-is with no effort - thanks ;)

Collectives™ on Stack Overflow

Adding html in Vue.js using data filters?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related