如何在Nuxt（Vue.js）中截断

Question

我一直在尝试截断组件中的文本并且它可以正常工作，排序。

我目前正在使用以下代码截断文字;

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

然后使用以下行调用truncate;

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

我不确定为什么会发生这种情况，因为过滤器（truncate）和被调用的位置在同一个组件中，然后两个页面都是根页面而另一个页面以完全相同的方式调用组件。

这似乎适用于作为根页面的一个页面，但是，它在其他显示以下错误的页面上不起作用;

Answer 1

你的代码很好。只是看起来字符串没有立即定义。您可以添加一个警卫：

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

尽管如此，在事情准备就绪之前，最好不要渲染代码的那一部分。你可以这样做（假设你正在使用一个对象）

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