Группировка и ограничение опций в select vue.js?

Question

[Dauren S]

https://codepen.io/dauren10/pen/REYJye
Как можно сделать так чтобы в селекте каждой цели пользователь мог выбрать максимум 100?
Т.е он выбрал для первой задачи 20, тогда для второй и третьей остается по 40. В общем чтобы по каждой цели опции были на 100 не больше.
Аналогично для 2 цели выбрал скажем 50 для четвертой задачи, тогда пятая тоже 50.
И все цели таким же образом.

Answer 1

[0xD34F]

Данные по целям и составляющим их задачам сложить в массив:

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

Сделать метод, который на основании суммы задач будет определять, какие value доступны для выбора:

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);
  },
},

Отрендерить select'ы:

<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/

Comments

[Dauren S]

Огромное спасибо!

[Dauren S]

Можно ли сделать так чтобы при меньше 100 у цели невозможно было отправить форму?

[0xD34F]

Dauren, можно, но здесь я вам ничего конкретного отвечать не буду. Ваш новый вопрос

1. Слабо связан с исходным (это плохо).
2. Задан спустя продолжительный промежуток времени после исходного (тоже плохо).

Так делать НЕ НАДО. Здесь не форум, и это не тема посвящённая лично вашим проблемам. Оформляйте отдельный вопрос.