How to create an array of objects in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today I am going to show you How do you create an array of objects in VueJS.

This tutorial will help you to create an array of objects means multiple objects available in an array in javascript.

JavaScript provides a push() method to add an element to the array and today we are going to use it to add a new object to the array.

Let’s start the today’s tutorial How do I create an array of objects in VueJS?

First, we have to create an empty array, and then we have to push the new object into an array check the below example with Output.

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    mounted(){
        let newArray = [];
        console.log("newArray >", newArray);
        // adding new object in array
        newArray.push({
        id: 1,
        name: "sortoutcode",
        url: "https://sortoutcode.com/"
        });
        console.log("newArray >", JSON.stringify(newArray));
    },
}
</script>

For now, let’s check the output of Array.push() method.

Output

Array.push() Method

All the best 👍.

Follow me on Twitter