screen_rotation
Copied to Clipboard
<html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Push array to array with key</h3> <button @click="pushArray">Push Array</button> <p v-for="(item, index) in mainArray" :key="index">{{ item.key }} - {{ item.value }}</p> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { mainArray: [ { key: 1, value: 'Item 1' }, { key: 2, value: 'Item 2' }, { key: 3, value: 'Item 3' }, ], }; }, methods: { pushArray() { const newArray = [ { key: 4, value: 'Item 4' }, { key: 5, value: 'Item 5' }, { key: 6, value: 'Item 6' }, ]; this.mainArray.push(...newArray.map(item => ({ key: item.key, value: item.value }))); }, }, }); </script> <style scoped> #app { margin: 20px; } h3 { font-size: 1.5rem; margin-bottom: 10px; } button { padding: 10px 20px; background-color: #4caf50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; } p { margin-bottom: 5px; font-size: 1rem; } </style> </body> </html>