Vue.js 2 Set all reactive properties from API call

Question

I have a vue component with some properties eg.

import { getAPI } from "@/axios-api";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "edit-profile-form",
  data() {
    return {
      first_name: "",
      last_name: "",
...

I also have an API call that will get these properties, which have exactly the same name eg.

{
   "first_name": "Jon",
   "last_name": "Doe"
}

Is there a way I can update both properties simultaneously? instead of doing

axios.get('/url/').then(res => {
  this.first_name = res.first_name;
  this.first_name = res.first_name;
});

Thanks

Answer 1

A quick way to copy those fields into your data is to use Object.assign() :

axios.get('/url/').then(res => {
  Object.assign(this.$data, res.data)
});

demo