Vue.js 如何将数据放入<；模板>；在具有Vue的组件中

我正在尝试进行分页，但我不能像这样放置动态总计：

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

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;
            });
        }

我认为这是因为：

total:数据函数（）{}中的this.total不正确或：

如何将动态变量total放入

我怎样才能修好它

---

谢谢

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

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

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;
            });
        }

此外，数据属性和道具属性不应同名！因此，将

total

data属性更改为另一个名称，并将其初始化为0

---

事实上，你根本不需要关心道具总数的传递，因为你的方法getPosts并不依赖于道具！因此，您的数据中可能只有

total:0

，这将解决您的问题

不要使用与相同的名称创建数据属性props@Phil我遇到了同样的问题，我更新了代码，错误：[Vue warn]：无效的属性：属性“pageCount”的类型检查失败。期望值为NaN的数字，未定义，可能是什么？在数据属性中添加

total:0，

。希望这能解决你的问题。还要检查您是否从api获取数据，并打印

json.data.last_page

的值以确保。@beingyogi但如果我添加总计：0，我如何从数据库中知道总计数据？因为我是从fetch this.total获取这些数据的，所以您可以详细查看vue的反应性