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
Source:stackexchange.com