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
Dependent Dropdown In Laravel 9 Vue JS
Dependent Dropdown In Laravel...

In this article, we will see a dependent dropdown in laravel 9 vue js. Here, we will learn how to create a dependent dro...

Read More

Dec-15-2022

Laravel 9 Socialite Login with Facebook Account
Laravel 9 Socialite Login with...

In this article, we will see laravel 9 socialite login with a facebook account. Many websites provide different typ...

Read More

Apr-16-2022

How to Create Custom Facade in Laravel 10
How to Create Custom Facade in...

Laravel, one of the most popular PHP frameworks, provides a powerful feature known as facades. Facades allow you to acce...

Read More

Sep-22-2023

How To Image Upload In CKeditor With Laravel 10
How To Image Upload In CKedito...

In this article, we will see how to image upload in CKEditor with laravel 10. Here, we will learn about image uploa...

Read More

May-08-2023