zhuoyue100
V2EX  ›  Vue.js

vue3 中 v-show 分页问题

  •  
  •   zhuoyue100 · Dec 30, 2024 · 3054 views
    This topic created in 675 days ago, the information mentioned may be changed or developed.

    const pagination = reactive({ page: 1, total: 9, page_size: 3 }) const showChart = computed(() => (i: number) => { let offset = (pagination.page-1)*pagination.page_size console.log(i, i > offset && i <= offset+pagination.page_size) return i > offset && i <= offset+pagination.page_size })

    首次展示正确,点击分页按钮后不切换,这个怎么实现?

    4 replies  •  2024-12-30 14:42:15 +08:00
    doco
    doco
    Dec 30, 2024
    1
    showChart 如果是绑定到图表上控制显隐的话直接改成方法, 不要用 computed
    ```
    function showChart(index: number) {
    ...
    }
    ```
    zhuoyue100
    zhuoyue100
    OP
    Dec 30, 2024
    2
    就是页面有 9 个元素,每次显示 3 个,用的 element plus 分页插件,分页时控制元素的显示隐藏,我上面写的没效果
    eris
    eris
    Dec 30, 2024
    3
    把计算属性去掉就行了,这个返回函数多此一举,猜测应该是 computed 返回的函数未立即执行,没能收集到依赖,在分页变化后不会更新对应的函数。

    分页场景下更合理的是用 计算属性 + 数组 slice 直接返回应该展示的数据,而不是用 v-show 。

    typescript```
    // 第一种改法
    const showChart = (i: number) => {
    let offset = (pagination.page - 1) * pagination.page_size;

    return i > offset && i <= offset + pagination.page_size;
    };
    ```
    zhuoyue100
    zhuoyue100
    OP
    Dec 30, 2024
    4
    @dingjs 按照你的方法可以了,感谢~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5136 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 01:54 · PVG 09:54 · LAX 17:54 · JFK 20:54
    ♥ Do have faith in what you're doing.