如何解决VueJS重复组件同时更新 更新
可能是一个简单的解决方案,但我目前没有看到。我有一个描述多种配置的对象。
对象看起来像这样:
export const fieldSelectionDefault = {
cohort: {
currency_key: null,salary_key: null,timeframe_key: null
},school: {
currency_key: null,timeframe_key: null,response_count_key: null,},}
export const cohortListFieldDefault = {
field_student: { ...fieldSelectionDefault },field_alum_1: { ...fieldSelectionDefault },field_alum_2: { ...fieldSelectionDefault },field_alum_3: { ...fieldSelectionDefault },}
现在,我有一个父组件,其中有一个表单。此表单将列出每个 field_*
以包含一个 <CohortFieldConfig />
组件,我们可以在其中输入 fieldSelectionDefault
的值。
在父表单中,我像这样添加它们:
<h5>Student</h5>
<CohortFieldConfig
:key="'settings.field_student'"
:disabled="settings.active_entities.student"
:selection-fields="settings.field_student"
@update-fields="(val) => test(val,'stu')"
/>
<h5>Alumnus 1</h5>
<CohortFieldConfig
:key="'settings.field_alum_1'"
:disabled="settings.active_entities.alum_1"
:selection-fields="settings.field_alum_1"
@update-fields="(val) => test(val,'alum')"
/>
CohortFieldConfig 看起来像这样(一个输入的例子,移除了 js 导入):
<template>
<div>
<a-form-item label="Currency input">
<a-input
:disabled="!disabled"
placeholder="Select a currency form key"
v-model="objSelectionFields.cohort.currency_key"
/>
</a-form-item>
<FieldSelector
@select="val => (objSelectionFields.cohort.currency_key = val)"
:user="user"
:disabled="!disabled"
/>
</div>
</template>
<script>
export default {
name: 'CohortFieldConfig',components: { FieldSelector },props: {
selectionFields: {
type: [Object,null],default: () => {
return { ...fieldSelectionDefault }
},disabled: {
type: Boolean,default: () => false,data: function() {
return {
fieldSelectionDefault,objSelectionFields: { ...this.selectionFields },}
},watch: {
objSelectionFields: {
handler(){
this.$emit('update-fields',this.objSelectionFields)
},deep: true
}
},methods: {
update() {
// not really used atm
this.$emit('update-fields',this.objSelectionFields)
},}
</script>
当您输入时,两者都会同时更新。对于学生和 alum_1。
为两个(相同)组件触发 update-fields
事件
是什么原因?我试过设置不同的 key
,不起作用。
更新
正如评论中所指出的,问题是我给出了相同的对象。为了纠正这个问题,我制作了对象的(深层)副本,如下所示:
export const cohortListFieldDefault = {
field_student: JSON.parse(JSON.stringify(fieldSelectionDefault)),field_alum_1: JSON.parse(JSON.stringify(fieldSelectionDefault)),field_alum_2: JSON.parse(JSON.stringify(fieldSelectionDefault)),field_alum_3: JSON.parse(JSON.stringify(fieldSelectionDefault)),}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。