如何移除Vue分页组件中的Next »与« Previous文本

方法1：组件内过滤链接数组 #

直接在组件里对传入的links数组做过滤，剔除包含目标文本的项。修改分页链接的渲染代码，并添加计算属性：

<!-- 修改v-for的遍历对象为filteredLinks -->
<li v-for="link in filteredLinks" :key="link.label">
    <a v-if="link.url" @click="loadPage(link.label)"
        :class="{ 'z-10 flex items-center justify-center px-3 py-2 text-sm leading-tight border text-primary-600 bg-primary-50 border-primary-300 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white': link.active, 'flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white': !link.active }">
        {{ link.label }}
    </a>
</li>

在组件的脚本部分添加计算属性：

computed: {
    filteredLinks() {
        return this.links.filter(link => {
            return link.label !== '« Previous' && link.label !== 'Next »';
        });
    }
}

方法2：数据源层面剔除 #

如果bookData.links是后端接口返回的，可直接在后端逻辑中移除这两个分页项；如果是前端生成的链接数组，在生成时跳过这两个文本对应的条目即可。

额外说明 #

你当前组件已经单独实现了带SVG图标的下一页按钮，移除文本版的Next/Previous链接不会影响分页功能，只会去掉冗余的文本导航项。

内容的提问来源于stack exchange，提问作者Michael David