Question

您已了解如何从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"

Answer 1

您应该考虑使用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属性使模板更清晰，逻辑与可视化分离（这是我认为最有价值的部分=）

Answer 2

请记住vue.js是一个javascript框架，因此您可以在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 个答案: