Question

我正在尝试在<component v-bind:is="...">循环中使用v-for渲染多个组件。效果很好，现在我需要在循环中分配v-model。

这就是我所拥有的-一个对象数组，每个对象代表组件及其道具，以及模型

let formA = [{
        component: 'formPartA',
        props: {
            value1: true,
            value2: "Hello",
        },
        model: "formData.formA" // This is what I need to use in the loop

    },
    {
        component: 'formPartB',
        props: {
            value1: true,
        },
        model: "formData.formB"

    },
];

数据：

data() {
    return {
        form: formA,
        formData: {
            formA: null,
            formB: null,
        },
    }
}

到目前为止，我已经能够成功渲染它：

<template v-for="(c, index) in form">
    <component
        v-bind:is="c.component"
        v-bind="c.props"
    ></component>
</template>

组件正在使用数组中定义的道具。我现在想要的只是添加v-model，但是我无法使用它。

我试图绑定它：

v-model="c.model"
:v-model="c.model"

或更改c.model

model: "formData.formA"
model: formData.formA
model: this.formData.formA

对我没有任何作用。

我什至尝试a workaround用v-model将v-bind:value重写为v-on:input，但这也不起作用。

感谢您的帮助！

Answer 1

看起来我刚刚找到了解决问题的方法：

v-model="formData[c.model]"

在let formA = ...

model: "formA"

data() {
    return {
        form: formA,
        formData: {
            formA: null,
            formB: null,
        }, 
    }
}

使用字符串作为模型名称在v-for循环中动态绑定v-model

1 个答案: