如何获取动态数组的数组长度答案

【问题标题】：How get array length for dynamic array如何获取动态数组的数组长度
【发布时间】：2020-03-01 20:11:57
【问题描述】：

您知道在从 API 加载包含的所有数据后如何获取行数问题数组吗？我需要为分页表设置 totalRows 但

this.questions = this.questions.lenght

不工作并返回 null。

export default {
    data() {
        return {
            questions: [],
            fields: [
                { key: 'id', label: 'ID', sortable: true },
                { key: 'title', label: 'Title', sortable: true },
                { key: 'updated_at', label: 'Last update', sortable: true},
            ],
            totalRows: 13,
            currentPage: 1,
            perPage: 5,
            pageOptions: [5, 10, 15]
        }
    },
    components: {},
    created() {
        axios.get('/api/question')
        .then(res => this.questions = res.data.data)
        .catch(error => console.log(error.response.data))
    },
}

我还添加了返回我的 API 的内容

questions:Array[10]
--0:Object
-----body:"Sed minima nemo fuga libero. Rerum incidunt odio voluptatem aut quidem consequuntur. Odio deserunt labore voluptatem quo aut atque nemo."
-----id:1
-----title:Object
-----updated_at:"1 tydzień temu"
-----user:"Ahmad Mills"

【问题讨论】：

this.questions.lenght 你打错了，应该是length。此外，您可能想查看计算属性。 vuejs.org/v2/guide/computed.html
@Cristy 我尝试使用文档 Boostrap Vue 执行此操作，然后添加：mounted() { this.totalRows = this.questions.length }，但仍然无法正常工作，您知道原因吗？
要么在需要的地方使用this.questions.length，要么使用上面提到的计算属性。如果你在挂载时设置了长度，那么它将被设置为 0，因为 API 请求还没有发送。
@StanisławSzewczyk 你确定：.then(res => this.questions = res.data.data) 吗？ res.data.data 实际上是问题数组所在的位置吗？

标签： vue.js vuejs2

【解决方案1】：

记住 vue.js 是一个 javascript 框架，所以你可以在 vue 中做所有 javascript 可以做的事情。

所以strings、arrays、objects 和functions 等的使用方式与在 javascript 中的使用方式相同。

所以你可以找到字符串或数组的长度为your_Array.length

 axios.get('/api/question')
    .then(
           res => {
             this.questions = res.data.data
             //now you can get length using 
             questions.length 
             //or you can create a computed property
           }
     )

阅读有关数组的更多信息here

【讨论】：

【解决方案2】：

您应该考虑使用computed 属性。在这里查看：https://vuejs.org/v2/guide/computed.html

如下所示：

template（示例）

<p>{{ totalRows }}</p>

<script>

export default {
    data() {
        return {
            questions: [],
            fields: [
                { key: 'id', label: 'ID', sortable: true },
                { key: 'title', label: 'Title', sortable: true },
                { key: 'updated_at', label: 'Last update', sortable: true},
            ],
            currentPage: 1,
            perPage: 5,
            pageOptions: [5, 10, 15]
        }
    },
    computed: {
        totalRows: function() {
             return this.questions.length
        },
    },
    created() {
        axios.get('/api/question')
        .then(res => this.questions = res.data.data)
        .catch(error => console.log(error.response.data))
    },
}

第二个选项，只需将属性放入您的模板中：

{{ questions.length }}

但是computed 属性使模板更清晰，并将逻辑与可视化分开（这是我认为最有价值的部分=））

【讨论】：