How can I truncate text using a Vue filter?

Question

I have a Vue Filter to truncate my text when it becomes too long. However, I can not get it to work and have no idea why. Any help welcome.

var app = new Vue({
  el: '#app',
  data: {
    text: 'Bark bark and a woof woof'
  }
})

Vue.filter('truncate', function (value, size) {
  if (!value) return '';
  value = value.toString();

  if (value.length <= size) {
    return value;
  }
  return value.substr(0, size) + '...';
});

My HTML is as follows;

<div id="app">
 <p>{{text | truncate(8) }}</p>
</div>

so what is the current result you get ? It still return the full text ? — Jake Lam
– Jake Lam, Commented May 21, 2020 at 14:14

Jake Lam · Accepted Answer · 2020-05-21 14:21:46Z

2

I just check your fiddle, the reason is you need to declare the Filter before creating the Vue object

Vue.filter('truncate', function (value, size) {
  if (!value) return '';
  value = value.toString();

  if (value.length <= size) {
    return value;
  }
  return value.substr(0, size) + '...';
});

var app = new Vue({
  el: '#app',
  data: {
    text: 'Bark bark and a woof woof'
  }
})

changing the order should works now

answered May 21, 2020 at 14:21

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

How can I truncate text using a Vue 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