How To Get Array Length In VueJS

In this article, we will see how to get "array length" in Vue JS and how to get "object length" in Vue JS. we will learn about Vue JS get array length or object length. if you worked with javascript or jquery then you know how to get array length. The length property sets or returns the number of elements in an array.

In the VueJS same way, you can get array length or object length. You can count array length or object length in Vue JS. Also, you can check the array length and the object length.

So, let's see how to get an array length in VueJS and how to get object length in Vue JS.

We can use the v-for directive to render a list of items based on an array. 

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Array Of Length and Object Length Example - Techsolutionstuff</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   
<div id="example_1">  
  <ul>
    <li v-if="myArray.length">Object Length : {{ myArray.length }}</li>
    <li v-for="value in myArray">
    	Category : {{ value.category }}
    </li>
  </ul>
  
</div>
  
<script type="text/javascript">
  
    var example_1 = new Vue({
      el: '#example_1',
      data: {
        myArray: [
          {category: 'Dell'},
          {category: 'Apple'},
          {category: 'Lenovo'},
          {category: 'Asus'}
        ]
      }
    })
  
</script>
 
</body>
</html>

 

 

Output:

Object Length : 4

Category: Dell
Category: Apple
Category: Lenovo
Category: Asus

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS