如何将数据放入 Vue 组件的 <template> 中答案

【问题标题】：How can I put a data inside the <template> in a component with Vue如何将数据放入 Vue 组件的 <template> 中
【发布时间】：2025-12-10 21:45:01
【问题描述】：

我正在尝试进行分页，但我无法将我正在执行的动态总数设为：

<v-pagination v-model="currentPage" 
                        :page-count="total"
                        :classes="bootstrapPaginationClasses"
                        :labels="paginationAnchorTexts"
                        ></v-pagination>

如何在 :page-count 中查看操作系统总数，这是一个动态总数，因为我从数据库中获取数据，我的 vue 代码是这个：

<script>
import vPagination from 'vue-plain-pagination';

export default {
    created() {
        this.getPosts();
    },
    methods: {
        getPosts() {
            fetch('/api/bank')
            .then(response => response.json() )
            .then(json => { 
                this.posts = json.data.data;
                this.total = json.data.last_page;
                this.current_page = json.data.current_page;
            });
        }
    },
    components: { vPagination },
    data: function() {
        return {
            postsSelected: "",
            posts: [],
            currentPage: 1,
            total: this.total,
            bootstrapPaginationClasses: {
                ul: 'pagination',
                li: 'page-item',
                liActive: 'active',
                liDisable: 'disabled',
                button: 'page-link'  
            },
            paginationAnchorTexts: {
                first: 'Primera',
                prev: '&laquo;',
                next: '&raquo;',
                last: 'Última'
            }
        }
    }
}
</script>

您如何看到我正在使用 fetch 从数据库中获取数据，然后将其拆分为不同的信息，例如总计，并且我在数据中使用此信息：function() {}。

你怎么知道总数是这样的：total: this.total，因为我想得到总数，但是当我这样做时，我得到了这个错误：

[Vue warn]: Invalid prop: type check failed for prop "pageCount". Expected Number with value NaN, got Undefined

我认为这是因为：

total：数据 function() {} 中的 this.total 错误或：
如何将动态变量 total 放入

我该如何解决？

谢谢！

【问题讨论】：

不要创建与props同名的数据属性
@Phil 我遇到了同样的问题，我更新了代码，错误：[Vue 警告]：无效的道具：道具“pageCount”的类型检查失败。值为 NaN 的预期数字，未定义，它可能是什么？
在 data 属性中添加 total: 0, 。希望这能解决您的问题。还要检查您是否从 api 获取数据并打印json.data.last_page 的值以确保。
@beingyogi 但如果我添加 total: 0 我如何知道数据库中的总数据？因为我从 fetch this.total 中获取这些数据
可以详细看看vue的reactivity here

标签： vue.js

【解决方案1】：

如果您想知道从 API 检索到的数据，您可以通过控制台记录返回的数据，如下所示：

getPosts() {
            fetch('/api/bank')
            .then(response => response.json() )
            .then(json => { 
                console.log(json.data)
                this.posts = json.data.data;
                this.total = json.data.last_page;
                this.current_page = json.data.current_page;
            });
        }

另外，你不应该有同名的 data 属性和 props 属性！因此，将total 数据属性更改为另一个名称，并将其初始化为值 0。

事实上，您根本不需要关心传递 Prop 总数，因为您的方法 getPosts 不依赖于 Prop！所以你可能只有total: 0 在数据中，这应该可以解决你的问题

【讨论】：