Question

我有一些表单数据，可以通过道具与子组件共享。现在，我想克隆prop对象并使它不活跃。就我而言，我希望用户能够在不实际更改克隆值的情况下修改props值。克隆值仅应在此处向用户显示编辑时的表单。下面的代码显示了这一点：

    <template>
        <div>
            <div v-if="computedFormData">
                original prop title: {{orgData.title}}

                new title:
                <input type="text" v-model="formData.title"/> 
                //changing data here will also change orgData.title
            </div>

        </div>
    </template>

    <script>
        export default {
            props: ['formData'],
            data() {
                return {
                    orgData: [],
                }
            },
            computed: {
                computedFormData: function () {
                    this.orgData = this.formData;
                    return this.orgData;
                },
            },
            methods: {
            },
        }
    </script>

我尝试过使用Object.freeze(testData);，但是它不起作用，testData和orgData都是反应性的。另请注意，使用mounted或created属性不会呈现orgData，因此我不得不使用computed属性。

Answer 1

尝试使用Object.assign复制prop值。由于新分配的值只是副本而不是对源的引用，因此反应性不再有问题。

如果您的数据对象复杂得多，我建议使用deepmerge代替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>

Answer 2

不确定为什么，但是对计算属性使用Object.assign对我不起作用。我通过将watch属性用作props值来解决了这个问题：

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

如何克隆道具对象并使其不活跃

2 个答案: