CODEWITHSUNDEEP
javascriptvuejs2bootstrap-vue
user2220551
user2220551

Reputation: 53

Vue.js2 - Object.assign({}, this.var) preventing watch method

returning this.user (a global computed property) works as expected. Of course, I'm making a copy because I do not want to overwrite the actual user data. So, I'm using Object.assign. However, once I include return Object.assign({}, this.user) (opposed to this.user), the watch method no longer functions.

Here is my template (I am using bootstrap-vue):

<template>
  <form role="form">
    <b-form-group
      label="First Name"
      label-for="basicName"
      :label-cols="3"
      :horizontal="true">
        <b-form-input id="user-name-first" type="text" v-model="userFormData.fname"></b-form-input>
    </b-form-group>
          <b-form-group
      label="Last Name"
      label-for="basicName"
      :label-cols="3"
      :horizontal="true">
        <b-form-input id="user-name-lirst" type="text" v-model="userFormData.lname"></b-form-input>
    </b-form-group>
          <b-form-group
      label="Email"
      label-for="user-email"
      :label-cols="3"
      :horizontal="true">
        <b-form-input id="user-email" type="text" v-model="userFormData.email"></b-form-input>
    </b-form-group>
      <b-form-group
          :label-cols="3"
          :horizontal="true">
                    <b-button type="submit" variant="primary">Save changes</b-button>
            <b-button type="button" variant="secondary" @click="userFormCancel">Cancel</b-button>
        </b-form-group>
      </form>
</template>

So, this works and sets editsPending to true whenever changes are applied to userProfile (via v-model on an input)

<script>
export default {
  name: 'userProfile',
  data () {
    return {
      editsPending: false
    }
  },
  computed: {
    userFormData: function () {
      return this.user
    }
  },
  watch: {
    userFormData: {
      deep: true,
      handler (val) {
        this.editsPending = true
      }
    }
  },
  methods: {
    userFormCancel () {
      this.editsPending = false
    }
  }
}
</script>

...but this does not; userFormData becomes a clone of user but editsPending is not affected by updates to userFormData. 

<script>
export default {
  name: 'userProfile',
  data () {
    return {
      editsPending: false
    }
  },
  computed: {
    userFormData: function () {
      return Object.assign({}, this.user)
    }
  },
  watch: {
    userFormData: {
      deep: true,
      handler (val) {
        this.editsPending = true
      }
    }
  },
  methods: {
    userFormCancel () {
      this.editsPending = false
    }
  }
}
</script>

Can anyone explain why this may be happening and suggest a viable solution?

Upvotes: 4

Views: 7901

Answers (3)

Sovalina
Sovalina

Reputation: 5609

A computed property will only re-evaluate when some of its dependencies have changed. (source)

That's why it works with return this.user and not with Object.assign because it's not a reactive dependency.

If you want reactive data you should initialize userFormData as an empty object data and assign your user when your Vue instance is created:

  data () {
    return {
      editsPending: false,
      userFormData: {}
    }
  },
  created() {
    this.userFormData = Object.assign({}, this.user)
  },

Upvotes: 4

Darlan Dieterich
Darlan Dieterich

Reputation: 2537

You can use the $emit to assign value to object:

mounted() {
  this.$emit("userFormData", this.user);
}

Upvotes: 0

Aur&#233;lien Bottazini
Aur&#233;lien Bottazini

Reputation: 3309

Tested different things to reproduce the behaviour you see.

I suspect that in your template your are binding your inputs to UserFormdata (incorrect)

<input v-model="userFormData.name">

Instead of (correct)

<input v-model="user.name">

If you could share your template that would help ;)

Edit: After template addition.

new Vue({
  el: '#app',
  data () {
    return {
      editsPending: false,
      user: { name: 'John Doe' },
      userCachedData: {},
    }
  },
  created() {
    this.userCachedData = Object.assign({}, this.user);
  },
  watch: {
    user: {
      deep: true,
      handler (val) {
        this.editsPending = true
      }
    }
  },
  methods: {
    userFormCancel () {
      this.editsPending = false
    }
  }
})

<div id="app">
  {{ user }}
  {{ userCachedData }}
  <br>
  <input v-model="user.name" />
  {{ this.editsPending }}
</div>

Codepen: https://codepen.io/aurelien-bottazini/pen/BVNJaG?editors=1010

Upvotes: 0

Related Questions