Vuetify 外部分页不显示页码

2023-12-26

我有一个 v-data-table,我正在尝试为其添加分页。我已按照示例文档进行操作here https://vuetifyjs.com/en/components/data-tables#example-paginate我看不出我做错了什么。创建我的组件后,它会调用我的后端来填充项目列表。然后将其传递到数据表。

我还有一个搜索栏,如果我在其中输入任何内容,就会弹出页码。

HTML

<v-data-table
      :headers="headers"
      :items="incidents"
      :search="search"
      :pagination.sync="pagination"
      hide-actions
      class="elevation-1"
      item-key="incident_number"
    >

</v-data-table>

 /* table row html in between */

<div class="text-xs-center pt-2">
      <v-pagination v-model="pagination.page" :length="pages" </v-pagination>
</div>

JS

我有一个计算属性,可以计算出页码,就像示例中一样。

computed: {
      pages ()
      {
        if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null)
        {
          return 0
        }

        return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)

      },
    }

解决了问题。当我在搜索栏中输入某些内容时它就会起作用,所以我注意到 Vue 正在发出一个事件。update:pagination其中有一个关键值称为totalItems它被设置为0在页面加载时,但是当我在搜索栏中输入某些内容时,它之后就会有一个值。

页面加载时

为了解决这个问题,当我的后端返回带有表数据的响应时。我设置了totalItems到表中条目数的长度。

this.incidents = response.data['incidents']
this.pagination.totalItems = this.incidents.length

固定或在搜索栏中输入

不确定这是否是 Vuetify v-data-table 的错误或问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuetify 外部分页不显示页码 的相关文章

随机推荐

  • 用于测试的 MQTT 代理

    尝试创建一个订阅 MQTT 代理并处理数据的 Python 脚本 然而 MQTT 代理到目前为止还没有收到任何数据 这使得测试变得困难 我发现以下脚本可以订阅主题并打印出有效负载 但我似乎无法连接到测试代理 import paho mqtt
  • ScrollViewer/StackPanel 构造内的 DataBound ListBox 和 Button,其中 Button 出现在 ListBox 内容末尾的下方

    我有以下构造 它显示了 StackPanel 内的 DataBound ListBox 和 Button 后者再次放置在 ScrollViewer 内
  • 从 mysqldump 创建的 SQL 恢复后出现错误 1465“无法在系统表上创建触发器”

    我在 amazon RDS 上运行 mysql 5 6 服务器 并设置一个只读副本 用于使用 mysqldump 创建备份 我尝试使用 all databases 选项 但是当我尝试导入 mysqldump 创建的 SQL 时 我最终从 m
  • 更新 Symfony2 上的composer.phar

    我有一个已经启动的 Symfony2 项目 我需要安装一个新捆绑 https packagist org packages doctrine mongodb odm bundle 正如我所见 我需要向我的composer json 添加一个
  • MySQLdb:操作数应包含 1 列

    我正在尝试使用 Python 和 MySQLdb 将一些数据插入 MySQL 数据库 当我在程序中执行以下函数时 MySQL 返回错误 1241 操作数应包含 1 列 用户 密码和数据库正确 表存在并且所有权限均已授予 def write
  • Pygame:无限滚动相机?

    所以我在 pygame 中编写了一个小型平台游戏 您可以在其中放置块并在它们上跳跃 但是 游戏仅限于窗口的边框 显然 那么如何添加使用 A 和 D 键滚动 相机 的方法呢 这是游戏的代码 import pygame random from
  • 在 Linq To Entities 中使用多个列连接表

    Linq to Entities 中的每个连接示例仅涉及on条款 如果我需要 2 列或更多列来制作 语法是什么join工作 如果可能的话 我还需要一个 Linq to Entities 查询表达式和基于方法的示例 下面是我需要的示例 表 1
  • PHP搜索引擎脚本

  • 哪些工具执行 IL 的编译后修改?

    最近提到 PostSharp 让我想起了这一点 去年我工作的时候 我们正在考虑使用 PostSharp 将检测注入到我们的代码中 这是在 Team Foundation Server 团队构建 持续集成环境中 考虑到这一点 我对 PostS
  • 帮助理解 javascript 全局消除技术

    来自 DailyJS 让我们构建一个 JavaScript 框架 http dailyjs com 2010 02 25 djscript part 1 structure 我不太确定以下代码 显然用作全局抑制技术 到目前为止 我的理解对
  • 使用移动设备的触摸事件模拟拖放事件

    前段时间 我在移动设备上的网络浏览器中进行拖放操作时遇到了困难 默认的 JavaScript 事件在移动设备上不起作用 您只能使用触摸事件 就我而言 我需要通过拖放来交换两个图像以及 ID 这里有一个例子 div display inlin
  • 从另一个 llvm::Module 获取函数声明

    在我的应用程序中 我有 2 个 LLVM 模块 运行时模块 其中包含void foo int a 函数定义 和可执行文件 我使用 LLVM C API 创建 在我的可执行模块中我创建int main int argc char argv 并
  • GNU make 不删除中间文件

    我的makefile如下 The names of targets that can be built Used in the list of valid targets when no target is specified and wh
  • 自动弹出标题,无延迟

    是否有机会执行 js onclick 函数 如果有人自动单击该图标 则会显示标题文本 或者当有人将鼠标移到其上时 标题将立即显示 现在元素的标题会在 1 秒后出现 你可以试试这个 纯css 没有js HTML div class hover
  • 什么是可标记元素?

    我已经阅读无障碍 http www w3 org TR aria in html fifth rule of aria use我偶然发现了一个我找不到准确信息的概念 HTML 可标记元素 我知道可标记元素背后的概念是可以由
  • 检查文件是否包含光栅或矢量元素? (pdf、eps、ai)

    有没有办法检查文件中是否包含光栅元素 我有兴趣对 pdf eps 和 ai 格式执行此操作 如果文件只是矢量 我将其转换为 svg 如果它有一些光栅元素 我必须将其转换为 png 文件 我正在使用 PHP 但我也可以使用任何命令行工具 例如
  • dict.viewkeys() 返回的数据类型是什么? [ 蟒蛇 2.7 ]

    我在学习dict viewkeys 今天 我发现我的python调用了它dict keys目的 我可以将其视为可迭代对象 但它不是生成器 因为我可以多次迭代它 以我有限的知识 我只知道String int float list dict t
  • html5画布kineticjs事件

    我似乎在使用事件获取时遇到问题动力学JS http kineticjs com以 1 或更小的行程在 Kinetic Line 上开火 我认为将所有行添加到一个组 然后将事件附加到一个组就足够了 但它不起作用 我已经简化了我想要完成的代码以
  • 重定向回同一页面时 CakePHP 缓存问题

    我正在使用 CakePHP 2 6 当我重定向回发出请求的同一视图时 我遇到了问题 该视图似乎已被缓存 因此在请求期间所做的任何更改都不会显示 直到再次刷新页面 这意味着 用户无法看到刚刚所做的更改 Flash 消息显示在下列的视图 这很糟
  • Vuetify 外部分页不显示页码

    我有一个 v data table 我正在尝试为其添加分页 我已按照示例文档进行操作here https vuetifyjs com en components data tables example paginate我看不出我做错了什么