How to clone props object and make it non-reactive

Try copying the prop values with Object.assign. No more issue with reactivity since the new, assigned values are just the copy instead of the reference to the source.

If your data object is a lot more complex, I'd recommend deepmerge in place of Object.assign.

Vue.component('FormData', {
  template: `
    <div>
      <div v-if="testData">
        <p>Original prop title: <strong>{{orgData.title}}</strong></p> 
        <p>Cloned prop title:</p>
        <input type="text" v-model="testData.title" />
      </div>
    </div>
  `,

  props: ['orgData'],

  data() {
    return {
      testData: Object.assign({}, this.orgData)
    }
  }
});

const vm = new Vue({
  el: '#app',

  data() {
    return {
      dummyForm: {
        title: 'Some title'
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form-data :org-data="dummyForm"></form-data>
</div>

Not entirely sure why but using Object.assign on a computed property did not work for me. I solved it by using a watch property for the props value:

    watch:{
        formData(){
            this.orgData = Object.assign({}, this.formData)
        }
    },

Tags:

Vue.Js

Recent Posts