我正在Vue中构建一个表单构建器，允许用户添加/删除各种类型的输入 . 到目前为止，我的方法是为每个输入类型设置一个模板组件，然后当用户选择该输入类型时，我将其推入父组件的数组中以循环显示 .

但是，我还需要将输入的值传递给父级（并将其存储在 input type="hidden" 元素中），因此我在子组件中发出一个事件并将其捕获到父组件中 . 我的问题是，当我输入时， labelText 的值会同时为每个 input type="hidden" 更新，而不是单独更新 . 我可以't work out what I'失踪？

Text input template

<template>
  <div id="TextInput">
    <input type="text" placeholder="Question" class="form__input_label" @input="sendLabelUp($event.target.value)" />
    <input type="text" placeholder="Test placeholder" />
    <slot name="removeField"></slot>
    <slot name="hiddenInputs"></slot>
  </div>
</template>

<script>
export default {
  name: 'TextInput',
  methods: {
    sendLabelUp: function(val) {
      this.$emit('input', val);
    },
  },
};
</script>

Parent template （仅包括我认为相关的部分）

<transition-group name="form__input_list" tag="div">
    <component :is="input.type" v-for="(input, index) in inputs" v-bind="input" :key="input" v-model="labelText" class="form__input">
        <div slot="removeField">
          <a class="btn btn--tertiary sml-push-top-half" @click="removeField(index)">Remove</a>
        </div>
        <div slot="hiddenInputs">
          <!-- Hidden inputs used to store question config -->
          <input type="hidden" :name="`pages[0]questions[${index}]type[${input.type}]label[${labelText}]`" />
        </div>
    </component>
</transition-group>

<script>
export default {
  name: 'InputGenerator',
  components: {
    TextInput,
    TextArea,
    NumberInput,
    LikertScale,
  },
  data() {
    return {
      inputs: [],
      dropdownActive: false,
      labelText: '',
    };
  },
};
</script>
javascript vue.js