[Vuejs]-How get array length for dynamic array

0👍

You should consider using a computed property.
Check here: https://v2.vuejs.org/v2/guide/computed.html

It would look like below:

template (example)

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

A second option, just put the property in your template like:

{{ questions.length }}

But the computed property makes the template clearer and separate logic from visualization (this is the most valuable part in my opinion =) )

-1👍

Remember vue.js is a javascript framework so you can do all those things in vue that javascript can.

So strings, arrays, objects and functions etc all are used in the same way as in javascript.

So you can find length of string or array as 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
           }
     )

Read more about arrays here

Leave a comment