Vue Js Get Array Of Length Or Object Length

Websolutionstuff | Jan-07-2022 | Categories : Laravel VueJs

In this tutorial, we will see you example of vue js get an array of length or object length. 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. 

In the vue js same way, you can get array length or object length in the vue js application and you can count array length or object length in vue js.

So, let's see how to get array length or 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 Or Object Length Example - Websolutionstuff</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: 'Laravel'},
          {category: 'PHP'},
          {category: 'Shopify'},
          {category: 'Magento'}
        ]
      }
    })
  
</script>
 
</body>
</html>

 

 

Output :

Object Length : 4

Category : Laravel
Category : PHP
Category : Shopify
Category : Magento

 


You might also like :

Recommended Post
Featured Post
Laravel 9 Form Collective Example
Laravel 9 Form Collective Exam...

In this article, we will see laravel 9 form collective example. Here, we will learn how to use collective form and...

Read More

Jan-20-2023

How to File Upload in Angular 17 Tutorial
How to File Upload in Angular...

In this article, we'll see how to file upload in the angular 17 tutorial. Here, we'll learn about file uplo...

Read More

Apr-03-2024

How to Generate QR Code in Node.js
How to Generate QR Code in Nod...

In this example we will see how to generate QR Code in Node.js application. In this example we will use qrcode npm...

Read More

Sep-20-2021

How To Get Last Record In Laravel 8
How To Get Last Record In Lara...

In this example, we will see how to get the last record in laravel 8. You can simply get the last record using laravel 8...

Read More

Jan-26-2022