VueJS: Установить динамическую v-модель внутри для цикла

Question

Что я хочу сделать, это установить v-model внутри цикла.Я пробовал несколько способов, но никогда не работал.

Мой текущий код выглядит следующим образом.

ChildComponent.vue

<div v-for="(child, index) in numberOfChildren">
    <input v-model="" />
    ...
<div>

 ...
 props: ["parent"],
 data() {
    return {}
 },
 methods: {

 },

И я хочу установить v-модель какparent.child1, parent.child2, parent.child3 ... в зависимости от его индекса внутри цикла.

Как этого добиться?

В родительском компоненте,

<div v-for="(parent, index) in parents">
    <ChildComponent>
</div>


data() {
    return {
        parents: [
                {
                 child_1: '',
                 child_2: '',
                 ...
                },
                {
                 child_1: '',
                 ...
                 }
            ]
        }
    }

Answer 1

Вы можете использовать вычисляемое свойство, которое получает текущее значение индекса «родительского» объекта и устанавливает это значение в качестве входного значения с v-моделированием. Пожалуйста, смотрите ниже:

шаблон:

<div>
    <input v-model="returnItem" />
    ...
    <button @click="changeIndex();"></button>
</div>
 ...

сценарий:

props: ["parent"],
data() {
     return {
       index : 0
    }
},
computed: {
     returnItem: {
        get () {
           let item = this.parent[this.index];
           return item;
    },
        set (theItem) {
           this.item = theItem;
    }
},
methods: {
       changeIndex: function () {
          some logic to toggle this.index
       }
    },
mounted () {
   this.index = whatever value you want to start with on load (i.e., 5);
}