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
How To Get Current User Location In Laravel 9
How To Get Current User Locati...

In this article, we will see how to get the current user location in laravel 9. Many times we are required to...

Read More

Mar-23-2022

How To Install React JS Step By Step
How To Install React JS Step B...

In this article, we will see how to install React JS step by step. we will see how to set up an environment fo...

Read More

Aug-08-2022

Laravel 9 One To One Relationship Example
Laravel 9 One To One Relations...

  In this article, we will see laravel 9 one to one relationship example. Also, you can use one to one re...

Read More

Apr-01-2022

How to Upgrade PHP 7.4 to 8.0 in Ubuntu
How to Upgrade PHP 7.4 to 8.0...

Hey there! I recently faced the need to upgrade my PHP version from 7.4 to the latest 8.0 on my Ubuntu server. It might...

Read More

Nov-06-2023