我有一些表单数据,可以通过道具与子组件共享。现在,我想克隆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
属性。
答案 0 :(得分: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>
答案 1 :(得分:0)
不确定为什么,但是对计算属性使用Object.assign
对我不起作用。我通过将watch属性用作props值来解决了这个问题:
watch:{
formData(){
this.orgData = Object.assign({}, this.formData)
}
},