screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h1>Vue Js Union of multiple Array of Object</h1> <div id="app"> <h2>All Objects:</h2> <ul> <li v-for="item in allObjects" :key="item.id">{{ item.name }}</li> </ul> <h2>Unique Objects:</h2> <ul> <li v-for="item in uniqueObjects" :key="item.id">{{ item.name }}</li> </ul> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { array1: [{ id: 1, name: "John" }, { id: 2, name: "Mary" }, { id: 3, name: "David" }], array2: [{ id: 2, name: "Mary" }, { id: 4, name: "James" }, { id: 5, name: "Anna" }], array3: [{ id: 3, name: "David" }, { id: 5, name: "Anna" }, { id: 6, name: "Lisa" }], allObjects: [], uniqueObjects: [] } }, mounted() { this.allObjects = [...this.array1, ...this.array2, ...this.array3]; this.uniqueObjects = this.allObjects.filter((item, index) => { const position = this.allObjects.findIndex(obj => obj.id === item.id); return position === index; }); } }) </script> </body> </html>