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 (将#修改为@）