vue.js - 如何将数据放入 in a component with Vue
I am trying to do a pagination but I can not put the dynamic total I am doing like this:
<v-pagination v-model="currentPage"
:page-count="total"
问题描述
I am trying to do a pagination but I can not put the dynamic total I am doing like this:
<v-pagination v-model="currentPage"
:page-count="total"
:classes="bootstrapPaginationClasses"
:labels="paginationAnchorTexts"
></v-pagination>
How you can see the total os in the :page-count, it is a dynamic total because I am getting data from database, my vue code is this one:
<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: '«',
next: '»',
last: 'Última'
}
}
}
}
</script>
How you can see I am using fetch to get the data from database and then I am split it in different information like total and the I am using this information inside the data: function() {}.
How you can tell total it's like this: total: this.total because I want to get the total number but when I do that I am getting this error:
[Vue warn]: Invalid prop: type check failed for prop "pageCount". Expected Number with value NaN, got Undefined
and I think that it is because:
- total: this.total in the data function() {} is bad or:
- how can I put the dynamic variable total inside the
How could I fix it?
Thanks!
- Open a Python REPL by typing
python into the command line
- Import the appropriate class that you want to use
- Use the class as needed
解决方案
如果您想知道从 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 属性！因此，将totaldata 属性更改为另一个名称并将其初始化为 0 值。
事实上，您根本不需要关心传递 Prop 总数，因为您的方法 getPosts 不依赖于 Prop！因此，您可能只有total: 0数据，这应该可以解决您的问题
推荐阅读
- c# - 如何强制 NetworkStream 使用 SSL？
- android - 如何在Recyclerview android中更改特定行的textview的可见性
- django - 如何使用 geojson 从 django 正确获取坐标到传单
- php - 如何编辑此代码以使其仅影响我的 wordpress 网站上的顶部菜单而不影响主菜单？
- python - 您可以使用 Python 将文件移动到 gcloud VM 实例吗
- tooltip - 散景工具提示不显示
- c - 在作为值传递的结构地址上设置 NULL
- python - 文件夹中的图像文件按字母顺序排序。但是附加列表不是按这个顺序
- java - 在Java中创建对象的ID
- flutter - Dart 中的字符串文字类型模拟
I am trying to do a pagination but I can not put the dynamic total I am doing like this:
<v-pagination v-model="currentPage"
:page-count="total"
问题描述
I am trying to do a pagination but I can not put the dynamic total I am doing like this:
<v-pagination v-model="currentPage"
:page-count="total"
:classes="bootstrapPaginationClasses"
:labels="paginationAnchorTexts"
></v-pagination>
How you can see the total os in the :page-count, it is a dynamic total because I am getting data from database, my vue code is this one:
<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: '«',
next: '»',
last: 'Última'
}
}
}
}
</script>
How you can see I am using fetch to get the data from database and then I am split it in different information like total and the I am using this information inside the data: function() {}.
How you can tell total it's like this: total: this.total because I want to get the total number but when I do that I am getting this error:
[Vue warn]: Invalid prop: type check failed for prop "pageCount". Expected Number with value NaN, got Undefined
and I think that it is because:
- total: this.total in the data function() {} is bad or:
- how can I put the dynamic variable total inside the
How could I fix it?
Thanks!
- Open a Python REPL by typing
pythoninto the command line - Import the appropriate class that you want to use
- Use the class as needed
如果您想知道从 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 属性！因此，将totaldata 属性更改为另一个名称并将其初始化为 0 值。
事实上，您根本不需要关心传递 Prop 总数，因为您的方法 getPosts 不依赖于 Prop！因此，您可能只有total: 0数据，这应该可以解决您的问题