@EA-EKB

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

Недавно начал изучать 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 к ним придется обращаться по номеру индекса, что не является прозрачным. В идеале было бы обращаться как это приведено в коде метода. Хотя с другой стороны создание такого количества переменных для проверок тоже не идеальный вариант с точки зрения расширяемости. Может кто-то посоветует вариант получше?
  • Вопрос задан
  • 124 просмотра
Решения вопроса 1
0xD34F
@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((data, param) => Object.assign(data, { [param.name]: param.val }), {})
}


UPD. Выглядеть живьём это всё может как-то так.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы