Render html using filter

Question

I need to write a filter which renders html tags. This is my filter:

filters: {
  limitStrLength: function (value, maxLength) {
    if (value && value.length > maxLength) {
      let partialVal = value.substr(0, maxLength) + "...";
      return "<span title='" + value + "' >" + partialVal + "</span>";
    } else {
      return value;
    }
  }
}

My problem is that I do not manage to render the raw html.

If I simply do:

<div>{{ productName  | limitStrLength(6) }}</div>

The html tags are rendered as string (i.e., I see on screen something like <span title=...).

I also tried using v-html attribute:

<div v-html="productName | limitStrLength(6)"></div>

But I get an error:

Property or method "limitStrLength" is not defined on the instance but referenced during render.

Any idea?

lukaszmtw · Accepted Answer · 2020-03-23 12:33:29Z

1

Try this:

<div v-html="$options.filters.limitStrLength(productName, 6)"></div>

Source: Github issue

edited Mar 23, 2020 at 12:33

answered Mar 23, 2020 at 12:26

lukaszmtw

4002 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Render html using filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related