Vue.js组件传值问题：编辑弹窗无法填充已有字段值求助

你的问题主要出在两个核心点上：

1. 循环内重复创建Dialog导致字段传递错误 #

你把<q-dialog>放在了v-for="field in fields"的循环内部，这意味着每一个字段都会生成一个独立的Dialog组件，而且所有Dialog都绑定到同一个editField开关变量。当你点击某个编辑按钮打开Dialog时，实际上所有Dialog都会被触发，你看到的只是最后一个渲染的Dialog，它对应的是循环中的最后一个字段，而非你点击的目标字段，自然无法填充正确的数值。

2. EditField组件未监听Props变化，仅在挂载时赋值 #

你的EditField组件只在mounted钩子中把this.field赋值给fieldToSubmit，但mounted只会在组件第一次挂载时执行一次。当你切换编辑不同的字段时，Propsfield会更新，但组件不会重新执行mounted，所以fieldToSubmit不会同步新的字段数据。

修复步骤与代码示例 #

第一步：重构Registration组件，将Dialog移到循环外 #

把Dialog从v-for循环中抽离出来，同时新增selectedField变量存储当前点击要编辑的字段，点击编辑按钮时先赋值再打开Dialog：

<template>
  <div class="q-pa-md" style="max-width: 900px">
    <div v-if="fields.length">
      <q-item-label header>User settings</q-item-label>
      <q-list v-for="field in fields" :key="field.id">
        <div v-if="field.type == 'singleLine'">
          <q-item>
            <q-item-section>
              <s-input 
                :label="field.name" 
                :rule="field.rule" 
                :required="field.required" 
                :type="field.fieldType" 
              />
            </q-item-section>
            <q-item-section side top>
              <div style="display: inline-flex;">
                <div>
                  <q-icon 
                    name="edit" 
                    color="blue" 
                    size="md" 
                    @click="handleEditField(field)"
                  />
                  <q-tooltip> Edit {{ field.name }} field </q-tooltip>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </div>
      </q-list>
      <!-- 仅保留一个Dialog，移到循环外 -->
      <q-dialog v-model="editField">
        <edit-field :field="selectedField"></edit-field>
      </q-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Registration',
  data() {
    return {
      newItem: true,
      titleAction: null,
      title: null,
      titleHideEvent: false,
      editField: false,
      fields: {},
      selectedField: null, // 存储当前选中的待编辑字段
      loading: false
    }
  },
  methods: {
    handleEditField(field) {
      this.selectedField = Object.assign({}, field); // 深拷贝避免修改原数据
      this.editField = true;
    }
  },
  mounted() {
    this.titleAction = 'Registration'
    this.titleHideEvent = true
  }
}
</script>

第二步：修改EditField组件，监听Props变化 #

使用watch监听field Prop的变化，每次字段更新时同步更新fieldToSubmit：

<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Edit Field</div>
    </q-card-section>
    <q-separator />
    <q-card-section style="max-height: 60vh; min-width: 560px;" class="scroll">
      <q-form @submit.prevent="onSubmit">
        <s-select 
          autocomplete 
          sorted 
          v-model="fieldToSubmit.type" 
          :options="$store.getters['options/list']('fieldTypes')" 
          option-value="value" 
          option-label="label" 
          label="Field Type" 
          required 
        />
        <s-input v-model="fieldToSubmit.name" label="Name" required />
        <s-select 
          autocomplete 
          sorted 
          v-model="fieldToSubmit.subType" 
          :options="$store.getters['options/list']('registrationFieldTextSubTypes')" 
          option-value="value" 
          option-label="label" 
          label="Subtype" 
          required 
        />
        <s-checkbox v-model="fieldToSubmit.required" label="Required" />
        <s-checkbox v-model="fieldToSubmit.active" label="Active" />
        <q-separator />
        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn label="Add" color="primary" type="submit" v-close-popup />
        </q-card-actions>
      </q-form>
    </q-card-section>
  </q-card>
</template>

<script>
export default {
  props: ['field'],
  data () {
    return {
      fieldToSubmit: {}
    }
  },
  watch: {
    field: {
      immediate: true, // 组件挂载时立即执行初始化
      handler(newField) {
        if (newField) {
          this.fieldToSubmit = Object.assign({}, newField);
        }
      }
    }
  },
  methods: {
    onSubmit () {
      console.log(this.fieldToSubmit)
      this.$q.notify({
        color: 'green-4',
        textColor: 'white',
        icon: 'cloud_done',
        message: 'Submitted'
      })
    }
  }
}
</script>

关键改动说明 #

• 抽离Dialog避免重复创建，用selectedField精准传递待编辑字段，确保弹窗拿到的是正确数据
• 用watch替代mounted同步字段数据，immediate: true保证组件挂载时也能正确初始化

这样修改后，点击编辑按钮就能正确打开对应字段的编辑弹窗并填充已有数值了。

内容的提问来源于stack exchange，提问作者kavkax