VueJS, как вместе использовать v-model, v-for и input?

Question

[Георгий Тихонов]

Добрый день, я сейчас изучаю Vue.JS и у меня тут возникла проблема, на которую я не могу найти ответа. Есть родительский компонент, форма. На этой форме есть кнопка для отправки, и кнопочка для добавления полей.
Само поле - это дочерний компонент, который состоит из двух input-элементов, чекбокса и текстового. На форме, соответственно, есть данные, поле fieldsCount = 3. И для отрисовки дочернего компонента я прохожусь по нему циклом v-for. Как мне сделать так, чтобы данные всех трёх дочерних компонентов хранились вместе на родительском компоненте? Потому как кнопка расположена на родительском компоненте.

Comments

[Георгий Тихонов]

Попробую лучше объяснить. Я хочу на родительском компоненте управлять количеством дочерних компонентов. И чтобы данные каждого из дочерних компонентов были доступны в родительском, чтобы сформировать из них массив.

[Михаил]

Goshan41k,

fields: [
  { text: '', checked: false },
  { text: '', checked: false },
]

итд

[Георгий Тихонов]

Михаил, а если количество полей заранее не известно? Я же говорю, что на форме управляющий элемент, хочу в один раз сделать с двумя полями запись, а в другой раз с шестью.

Answer 1

[0xD34F]

В родительском компоненте храните массив объектов с данными:

data: () => ({
  items: [],
}),

На основе этого массива создаёте с помощью v-for экземпляры дочернего компонента, к которым цепляете посредством v-model элементы массива:

<child-component v-for="(n, i) in items" v-model="items[i]"></child-component>

В дочернем компоненте делаете вычисляемое свойство: объект с данными, получаемый из родителя, заворачиваете в Proxy, который будет перехватывать установку значений свойств, собирать новый объект и отправлять его назад родителю:

props: [ 'value' ],
computed: {
  innerValue() {
    return new Proxy(this.value, {
      set: (target, prop, val) => {
        this.$emit('input', { ...target, [prop]: val });
        return true;
      },
    });
  },
},

Используете свойства этого объекта в v-model:

<input type="text" v-model="innerValue.someStringProp">
<input type="checkbox" v-model="innerValue.someBooleanProp">
<input type="number" v-model.number="innerValue.someNumberProp">

https://jsfiddle.net/aghpL7tf/2/

Comments

[Георгий Тихонов]

Благодарю, это как раз то что я искал