Question

我有一个动态的分页器没有基于底层的计算属性进行更新（IS更新，我已经从控制台验证过）。

    <template v-for="(p, i) in pageStart + 4">
        <li v-if="p <= lastPage && i <= 4" @click="getPage(p)" :class="{active: isActive(p)}"><a href="#">{{ p }}</a></li>
    </template>

在上面的例子中，pageStart是一个计算属性，当我点击各种分页符号时它会正确改变 - 但数字本身不会改变。换句话说，这个v-for循环中的'p'永远不会更新，所以我总是坚持使用编号为1-5的分页符。

Answer 1

你的for循环逻辑有问题。对于v-for的每个值，1将从pageStart + 4循环到pageStart。与此同时，您有i <= 4，因此每次pageStart更改时，它只会呈现前4个。

你可能想要更像的东西：

<template v-for="p in 4">
    <li v-if="p + pageStart <= lastPage" 
        @click="getPage(p + pageStart)" 
        :class="{active: isActive(p + pageStart)}">
        <a href="#">{{ p + pageStart }}</a>
    </li>
</template>

动态分页器/计算属性不更新

1 个答案: