Vue - 在v-for循环中将v-model从子节点传递给父节点

Question

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

但是，我还需要将输入的值传递给父级（并将其存储在input type="hidden"元素中），因此我在子组件中发出一个事件并将其捕获父母。我的问题是，当我输入时，labelText的值会立即更新为每个input type="hidden"，而不是单独更新。我无法解决我失踪的问题？

文字输入模板

<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>

父模板（仅包括我认为相关的部分）

<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>