我正在Vue中构建一个表单构建器,允许用户添加/删除各种类型的输入 . 到目前为止,我的方法是为每个输入类型设置一个模板组件,然后当用户选择该输入类型时,我将其推入父组件的数组中以循环显示 .
但是,我还需要将输入的值传递给父级(并将其存储在 input type="hidden" 元素中),因此我在子组件中发出一个事件并将其捕获到父组件中 . 我的问题是,当我输入时, labelText 的值会同时为每个 input type="hidden" 更新,而不是单独更新 . 我可以't work out what I'失踪?
Text input template
export default {
name: 'TextInput',
methods: {
sendLabelUp: function(val) {
this.$emit('input', val);
},
},
};
Parent template (仅包括我认为相关的部分)
export default {
name: 'InputGenerator',
components: {
TextInput,
TextArea,
NumberInput,
LikertScale,
},
data() {
return {
inputs: [],
dropdownActive: false,
labelText: '',
};
},
};