时间戳

首页 > 解决方案 > 如何克隆道具对象并使其无反应

vue.js - 如何克隆道具对象并使其无反应

问题描述

我有一些表单数据，我通过道具与子组件共享。现在我想克隆道具对象并使其无反应。在我的情况下，我希望用户能够在不实际更改克隆值的情况下修改 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 都是反应式的。另请注意，使用mountedorcreated属性不会呈现 orgData，因此我被迫使用该computed属性。

标签： vue.js

解决方案

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

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

推荐阅读