Vue Js Push Array to Array

<!DOCTYPE html>
<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</h3>
    <p>Array 1: {{ array1 }}</p>
    <p>Array 2: {{ array2 }}</p>
    <button @click="pushArray">Push Array 2 into Array 1</button>
    <p>Result: {{ result }}</p>
  </div>

p {
      font-size: 16px;
      margin-bottom: 10px;
    }

button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      font-weight: bold;
    }
  </style>

</body>

</html>

​x
 
<!DOCTYPE html>
<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</h3>
    <p>Array 1: {{ array1 }}</p>
    <p>Array 2: {{ array2 }}</p>
    <button @click="pushArray">Push Array 2 into Array 1</button>
    <p>Result: {{ result }}</p>
  </div>
​
  <script type="module">
    const app = new Vue({
      el: "#app",
      data: {
        array1: [1, 2, 3],
        array2: [4, 5, 6],
        result: null
      },
      methods: {
        pushArray() {
          this.array1.push(...this.array2);
          this.result = this.array1;
        }
      }
    });
  </script>
  <style scoped>
    #app {
      margin: 20px;
    }
​
    p {
      font-size: 16px;
      margin-bottom: 10px;
    }
​
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
    }
​
    button:hover {
      background-color: #0056b3;
    }
​
    .result {
      font-weight: bold;
    }
  </style>
​
</body>
​
</html>