Grouping and restricting options in select vue.js?

Question

Vue.js

https://codepen.io/dauren10/pen/REYJye
How can I make it so that in the select of each goal the user can select a maximum of 100?
That is, he chose 20 for the first task, then 40 remain for the second and third. In general, the options for each goal should be no more than 100.
Similarly, for 2 goals, I chose, say, 50 for the fourth task, then the fifth is also 50.
And all the goals in the same way.

Answer 1

Put the data on the goals and their constituent tasks into an array:

data: () => ({
  goals: [
    {
      name: '...',
      tasks: [
        { name: '...', value: 0 },
        { name: '...', value: 0 },
        ...
      ],
    },
    ...
  ],
}),

Make a method that, based on the sum of tasks, will determine which values ​​are available for selection:

methods: {
  getValues(tasks, task) {
    const max = 100 - tasks.reduce((acc, n) => acc + n.value, -task.value);
    return [ 0, 10, 20, 30, 40, 50, 60 ].filter(n => n <= max);
  },
},

Render selects:

<tr v-for="g in goals">
  <td>{{ g.name }}</td>
  <td>
    <div v-for="t in g.tasks" class="task">
      {{ t.name }}
      <select v-model.number="t.value">
        <option v-for="v in getValues(g.tasks, t)" :value="v">{{ v }}</option>
      </select>
    </div>
  </td>
</tr>

https://jsfiddle.net/qmu1enhy/