screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Comparing two arrays of objects is difficult when order is not fixed</h3> <p>{{array1}}</p> <p>{{array2}}</p> <p v-if="areArraysEqual(array1, array2)">Arrays of object are equal</p> <p v-else>Arrays of object are not equal</p> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { array1: [{ name: 'Andrew', salary: 25000 }, { name: 'John', salary: 50000 }], array2: [{ salary: 50000, name: 'John' }, { salary: 25000, name: 'Andrew' },], } }, methods: { areArraysEqual(array1, array2) { if (array1.length !== array2.length) return false; for (let i = 0; i < array1.length; i++) { let found = false; for (let j = 0; j < array2.length; j++) { if (this.areObjectsEqual(array1[i], array2[j])) { found = true; break; } } if (!found) return false; } return true; }, areObjectsEqual(obj1, obj2) { return Object.entries(obj1).every(([key, value]) => obj2.hasOwnProperty(key) && obj2[key] === value); } } }); </script> </body> </html>