如何在 Nuxt 中截断 (Vue.js)

Question

我一直在尝试截断组件中的文本，但它确实有效。

我目前正在使用以下代码来截断文本；

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

然后使用以下行调用截断；

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

我不确定为什么会发生这种情况，因为 filter(truncate) 和调用它的位置在同一个组件中，然后两个页面都是根页面，另一个页面调用组件完全相同方式。

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

Answer 1

你的代码没问题。看起来字符串没有立即定义。你可以像这样添加一个守卫：

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

不过，在一切准备就绪之前，最好不要渲染这部分代码。你可以做这样的事情（假设你正在处理一个对象）

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

How to truncate in Nuxt (Vue.js)