Answer the question
In order to leave comments, you need to log in
How to write your own v-model for each input from the set of inputs output via v-for?
I recently started learning Vue.js and ran into this problem. On the page, using v-for, a set of input type=file is displayed. Some of these inputs are required to be filled in, without filling them in, the button for moving to the next step is inactive. I came up with the following solution, which works great for input type=text, radio buttons and checkboxes, which are mostly rendered without v-for.
The attribute :disabled="nextButtonDisabled" is added to the button.
The nextButtonDisabled method itself looks like this:
nextButtonDisabled: function() {
var self = this;
var data = self.formData;
if (data.param1 && data.param2) // если поля заполнены - активируем кнопку
return false;
return true;
}
formData stores all variables. formData: [
param1: null,
param2: null,
uploads: [
{key: 1, name: 'param1', required: 1, caption: 'Параметр 1'},
{key: 2, name: 'param2', required: 1, caption: 'Параметр 2'},
и т.д.
]
]
(I probably messed up here, because I'm writing from memory... but the fields are displayed correctly, tomorrow I'll add the correct code) Answer the question
In order to leave comments, you need to log in
For each element in uploads, add the val property, which you use in v-model.
So nextButtonDisabled is noticeably simplified:
nextButtonDisabled() {
return this.uploads.some(n => n.required && !n.val)
}
formData() {
return this.uploads.reduce((acc, n) => (acc[n.name] = n.val, acc), {})
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question