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 Autocomplete Search from Database
Laravel 9 Autocomplete Search...

In this article, we will see laravel 9 autocomplete search from the database. Using ajax autocomplete textbox in la...

Read More

Mar-14-2022

Drag and Drop File Upload Using Dropzone js in Laravel 9
Drag and Drop File Upload Usin...

In this article, we will see drag and drop file upload using dropzone js in laravel 9. Dropzone JS is an open-source lib...

Read More

Mar-19-2022

How To Check Occupied Disk Space In Laravel
How To Check Occupied Disk Spa...

Many times we need requirements to check the occupied disk space of the server on the admin side and we are checking man...

Read More

Jul-29-2020

Multi Step Form Wizard jQuery Validation
Multi Step Form Wizard jQuery...

In this article, we will see multi step form wizard jquery validation. Here, we will learn jquery validation for mu...

Read More

Jan-30-2023