how to assign Object values

by SnehalKadwe

HTML

<!-- Explicit dependency. Using Vue 2.2.1 -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<h3 class="heading">
How to assign object values to any given object using Object.assign.
</h3>
  <p>
    {{ form.answers }} 
  </p>
  <br>
  <button type="button" @click="save()">
  Save
  </button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.heading {
  font-weight: bold;
  text-align: center;
  margin: 20px 0px;
}
button {
  margin:20px;
  padding:10px 20px;
  background-color: blue;
  border:1px solid blue;
  color: #fff;
  border-radius:4px;
}
p {
  text-align: center;
}

Vue

new Vue({
  el: "#app",
  data: {
  	form: {
      answers: {
       0: 'elephant'
      }
  	},
    dataValues: {
        0: {
          a: 'apple',
          b: 'basketball',
        },
        1: {
         c: 'cat',
         d: 'dog'
        }
      }
  },
  methods: {
    save() {
       Object.assign(this.form.answers, this.dataValues);
    },
  }
});