Недавно начал изучать 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 к ним придется обращаться по номеру индекса, что не является прозрачным. В идеале было бы обращаться как это приведено в коде метода. Хотя с другой стороны создание такого количества переменных для проверок тоже не идеальный вариант с точки зрения расширяемости. Может кто-то посоветует вариант получше?
Простой