How to check that all items have been selected?

Question

Vue.js

Suppose I have many view sections:

data: 
  {
    user_input_1 : 
    {
     isFilled : false,
     val_1 : null,
     val_2 :null,
     val_3 : null,
    },

    user_input_2 : 
    {
     isFilled : false,
     val_1 : null,
     val_2 :null,
     val_3 : null,
    },
}

How to organize a check of all of them to see if they are full? Is it worth checking the fact of their filling in computed? Type:

computed :
{
  // как-то тут перебирать все и выставлять флаг заполненности
}

Or can somehow everywhere on-changed make a function and organize a check in it when changing?

Or is there a better option?

Answer 1

Collect all user_input_* into one object (user_inputs, for example), and then you can do this:

computed: {
  isFilledAll() {
    return Object.values(this.user_inputs).every(n => n.isFilled);
  },
},

Or by "filled" do you mean non-null values ​​of val_* properties? Then separate isFilled is not needed:

isFilledAll() {
  return Object.values(this.user_inputs).every(n => Object.values(n).every(m => m !== null));
}