Динамическое связывание v-модели в цикле v-for с использованием строки в качестве имени модели - PullRequest
Новая
       24

Динамическое связывание v-модели в цикле v-for с использованием строки в качестве имени модели

1 голос
/ 05 мая 2019

Я пытаюсь визуализировать несколько компонентов, используя <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

и у меня ничего не работает.

Я даже попробовал обходной путь , чтобы просто переписать v-model в v-bind:value с v-on:input, это тоже не сработало.

Буду благодарен за любую помощь!

1 Ответ

0 голосов
/ 05 мая 2019

Ну, похоже, я только что нашел решение своей проблемы: 

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

В let formA = ...

model: "formA"

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