How to truncate in Nuxt (Vue.js)

Question

I've been trying to truncate text within a component and it works, sorta.

I am currently using the following code to truncate the text;

filters: {
  truncate(string, value) {
    return string.substring(0, value) + '…';
  }
}

Then the truncate is called with the following line;

<p>{{ excerpt | truncate(77) }}</p>

I'm not sure why this is happening since the filter(truncate) and where it's being called is within the same component, then both of the pages being the root page and the other page calls the component the exact same way.

This seems to work for one page being the root page however, it doesn't work on other pages with displaying the following error;

Bill Criswell · Accepted Answer · 2018-04-12 16:04:30Z

1

Your code is fine. It just appears the string isn't defined immediately. You can add a guard like:

(string || '').substring(0, value) + '…'

Though, it might be better to not render that part of your code until things are ready. You can do something like this (assuming you're working with an object)

<div v-if="post">
  {{ post.excerpt | truncate(3) }}
</div>
<div v-else>
  Post is loading...
</div>

answered Apr 12, 2018 at 16:04

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

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

3 Comments

Jordan H. Over a year ago

Thank you so much, after you mentioned that it could just not be loading just yet along with the v-if statement; It gave me feedback that it can't find the excerpt.

Bill Criswell Over a year ago

No problem at all!

moses toh Over a year ago

@Bill Criswell Maybe you can help me. Look at this : stackoverflow.com/questions/52584451/…

Collectives™ on Stack Overflow

How to truncate in Nuxt (Vue.js)

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related