0

I'm working on vuejs frontend with 'step wizards' and the display for each steps depends on the value saved on each step.
Meaning on each next/back button I'm doing a database post.

One solution could be using the mounted and calling an axios get to populate my form variables which will definitely solve my issues. But again will need to change and do a lot of

this.variable1 = response.data.variable1
this.variable2 = response.data.variable2
this.variable3 = response.data.variable3
this.variable4 = response.data.variable4

So was wondering if we can change the VueJS props: ['var'], on server post since we have already used the prop object (user object).

Example VueJS

Vue.component('blog-post', {
  props: ['user'],
  template: '<h3>{{ user }}
             <a href="#" @click="saveUser">Save</a>
            </h3>',

methods: {
  saveUser() {
        axios call here 
        and must change the user object
    }
  }
});
Cruze
  • 250
  • 3
  • 18
  • I think [here](https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) is the answer. – Tpojka Oct 01 '18 at 23:22
  • please provide more code ? – Boussadjra Brahim Oct 01 '18 at 23:32
  • In accepted answer there you can see how to merge already existing object `this` with object `response.data`. – Tpojka Oct 02 '18 at 00:15
  • I have updated the question to make it clearer. – Cruze Oct 02 '18 at 00:48
  • If you want to update the user prop and reflect this change to the parent you can implement the [v-model pattern](https://alligator.io/vuejs/add-v-model-support/) or use the [sync modifier](https://medium.com/front-end-hacking/vues-v-model-directive-vs-sync-modifier-d1f83957c57c) – Max Oct 03 '18 at 07:46

0 Answers0