今天我被要求使用插槽构建一个动态表单组件。表单组件将包含一个输入的动态列表,用户可以将v-model属性包含在自己的输入字段中。填写最后一行时,应在其下方显示一个新的空行。我从这个开始:
parent.vue(注意:跳过了不相关的代码):
<template>
<div>
<FormComponent><input type="text" v-model="something"/></FormComponent>
<div>
</template>
<script>
import FormComponent from '../components/FormComponent.vue';
export default {
components: { FormComponent },
data() {
return {
something: [] // could be a list, or a string, number, Object, etc...
};
}
}
</script>
formcomponent.vue:
<template>
<div>
<div v-for="(item, index) in items" :key="index">
{{index+1}}<slot v-bind="items"></slot>
</div>
</div>
</template>
<script>
export default {
name: "FormComponent",
data() {
return {
items: []
}
},
props: {
value: String,
},
created() {
console.log("create newform");
},
watch: {
items(oldValue, newValue) {
if (oldValue[oldValue.length] == "" && newValue[newValue.length] != "") {
newValue.push("");
}
}
},
现在我想将父级中定义的v-model绑定到一个数组以自动生成新行,但似乎无法从插槽中提取v-model值。如何将输入中v模型定义的值链接到数组?
另外,如何允许动态更新列表?
3条答案
按热度按时间xkftehaa1#
插槽的整个思想是通过父组件而不是子组件来管理它们。所以
v-for
应位于父组件内部,而不是FormComponent
. 父级还负责将新的空字段添加到v-model
S您可能有一个formcomponent,并将几个formfield组件放入其中,每个formfield可能有不同类型的输入。formcomponent.vue
formfield.vue
然后,您可以编写如下内容:
z3yyvxxp2#
我想你需要这样的东西(它是vue 3。只是v模式系统有点不同)
表单组件:
parent.vue
iugsix8n3#
我想达到的目标更像这样: