Как прописать свою собственную v-model для каждого input из множества input выводимых через v-for?

Question

[EA-EKB]

Недавно начал изучать Vue.js и столкнулся с такой задачей. На странице с помощью v-for выводится набор input type=file. Часть из этих input'ов обязательна к заполнению, без их заполнения неактивна кнопка перехода на следующий шаг. Придумал следующее решение, которое отлично работает для input type=text, radio-кнопок и checkbox'ов, которые в большинстве выводятся без v-for.

Кнопке добавляется атрибут :disabled="nextButtonDisabled".

Сам метод nextButtonDisabled выглядит следующим образом:

nextButtonDisabled: function() {
    var self = this;
    var data = self.formData;
    
    if (data.param1 && data.param2)  // если поля заполнены - активируем кнопку
        return false;
    
    return true;
}

В formData хранятся все переменные.

У input'ов прописываю v-model="formData.param1" и т.п.

Это хорошо работает для полей прописанных вручную, но как указать v-model для полей которые выводятся v-for'ом из такого объекта:

formData: [
    param1: null,
    param2: null,
    uploads: [
        {key: 1, name: 'param1', required: 1, caption: 'Параметр 1'},
        {key: 2, name: 'param2', required: 1, caption: 'Параметр 2'},
        и т.д.
    ]
]

(тут скорей всего напутал, так как пишу по памяти... но поля выводятся исправно, завтра дополню правильным кодом)

Можно ли как-то в v-for прописать v-model="formData.xxxxx", где xxxxx - поле name из объекта, чтобы потом проверять эти переменные методом nextButtonDisabled?

P.S. писать v-model так чтобы значение заносилось в объект из которого формируются поля по-моему не вариант, так как в методе nextButtonDisabled к ним придется обращаться по номеру индекса, что не является прозрачным. В идеале было бы обращаться как это приведено в коде метода. Хотя с другой стороны создание такого количества переменных для проверок тоже не идеальный вариант с точки зрения расширяемости. Может кто-то посоветует вариант получше?

Answer 1

[0xD34F]

Каждому элементу в uploads добавляете свойство val, которое и используете в v-model.

Таким образом, nextButtonDisabled заметно упроститься:

nextButtonDisabled() {
  return this.uploads.some(n => n.required && !n.val);
},

Отдельные же значения param1, param2, ... - выкидываете, вместо этого делаете computed свойство formData:

formData() {
  return this.uploads.reduce((acc, n) => (acc[n.name] = n.val, acc), {});
},

Comments

[EA-EKB]

решение красивое, но не подходит, т.к. для input type=file не получается указать v-model. в консоле пишет что эти поля только для чтения.

[0xD34F]

Ну так там ещё должно быть написано, что для файлов следует использовать обработчик события change, как-то так, например:

<div v-for="n in uploads">
  <label>
    {{ n.caption }}
    <input type="file" @change="n.val = $event.target.files[0]">
  </label>
</div>