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
11+ Laravel Tips: Optimize Database Queries (2024)
11+ Laravel Tips: Optimize Dat...

Hey developers! If you're like me, constantly striving to make your Laravel applications faster and more effici...

Read More

Jan-05-2024

Laravel 9 Flash Message Example
Laravel 9 Flash Message Exampl...

In this article, we will see a laravel 9 flash message example. Here, we will learn how to create or implement flash mes...

Read More

Dec-27-2022

Laravel 11 Use Quill Rich Text Editor Example
Laravel 11 Use Quill Rich Text...

Hello, laravel web developers! In this article, we'll see how to use Quill rich text editor in laravel 11. Here, we&...

Read More

Sep-04-2024

Multiple ways to Validate Email Addresses in Laravel 10
Multiple ways to Validate Emai...

Hey there! Have you ever wondered how websites ensure that the email addresses you provide are valid? In this article, I...

Read More

Mar-04-2024