Функция push всех данных в первом выборе цикла v-for

Question

хотел бы вызвать функцию для всего цикла в моем v-for .. это работает, но моя функция передает данные только при первом выборе ...

<td style="min-width: 75px" v-for="date of dates" v-bind:key="date.id">
    <!-- Boucle for sur la date pour chaque utilisateur -->
    <form v-if="weekEnd(date)">
        <select v-bind:placeholder="generateTasksAM(user.id, date)" v-on:change="deleteTaskAM(user.id,date)" id="matin" size="1">

        </select>
    </form>
</td>

generateTasksAM: function(user, date) {
    for (var i = 0; i < this.assignments.length; i++) {
        var date1 = new Date(date);
        var date2 = new Date(this.assignments[i].start);

        if (user === this.assignments[i].User.id) {
            if (
              date1.getFullYear() === date2.getFullYear() &&
              date1.getMonth() === date2.getMonth() &&
              date1.getDate() === date2.getDate()
            ) {
            if (this.assignments[i].heuredebut <= "12:00:00") {
                for (var j = 0; j < this.options.length; j++) {
                    if (this.assignments[i].Task.Project.name === this.options[j]) {
                        var select = document.getElementById("matin");
                        select.options[j] = new Option(this.options[j],this.options[j],true,true);
                    } else {
                        var select = document.getElementById("matin");
                        select.options[j] = new Option(this.options[j],this.options[j],false,false);

Answer 1

Ваша проблема в том, что вы всегда получаете один и тот же выбор при нажатии параметров.

var select = document.getElementById("matin");

---

РЕШЕНИЕ

Назначение различных идентификаторов селекторам.

<select v-bind:placeholder="generateTasksAM(user.id, date)" v-on:change="deleteTaskAM(user.id,date)" :id="'matin-' + SOME_ID" size="1">

var select = document.getElementById('matin-' + SOME_ID);

Необходимые модификации

В цикле шаблона:

<td style="min-width: 75px" v-for="(date, index) of dates" v-bind:key="index">

В шаблоне выберите:

<select v-bind:placeholder="generateTasksAM(user.id, date, index)" v-on:change="deleteTaskAM(user.id,date)" :id="'matin-' + index" size="1">

В generateTasksAM Функция:

generateTasksAM: function(user, date, index) {
    for (var i = 0; i < this.assignments.length; i++) {
        var date1 = new Date(date);
        var date2 = new Date(this.assignments[i].start);

        if (user === this.assignments[i].User.id) {
            if (
              date1.getFullYear() === date2.getFullYear() &&
              date1.getMonth() === date2.getMonth() &&
              date1.getDate() === date2.getDate()
            ) {
            if (this.assignments[i].heuredebut <= "12:00:00") {
                for (var j = 0; j < this.options.length; j++) {
                    if (this.assignments[i].Task.Project.name === this.options[j]) {
                        var select = document.getElementById("matin-" + index);
                        select.options[j] = new Option(this.options[j],this.options[j],true,true);
                    } else {
                        var select = document.getElementById("matin-" + index);
                        select.options[j] = new Option(this.options[j],this.options[j],false,false);

Answer 2

Я могу предложить вам перейти к структуре вашего кода, не используя функцию для создания ваших выборок.

Чтобы достичь этого, можно использовать шаблоны для воспроизведения того, что вы делали в своей функции.

Это просто идея, а не рабочий код.

Шаблон:

<select v-on:change="deleteTaskAM(user.id,date)" size="1">
  <template v-for="assignment in assignments">
    <template v-if="assignment.User.id == user.id">
      <template v-if="checkDates(date,assignment.start) && assignment.heuredebut <='12:00:00'">
        <option v-for="option in options" :value="option" :selected="assignment.Task.Project.name === option">{{ option }}</option>
      </template>
    </template>
  </template>
</select>

Скрипт:

methods: {
  checkDates(date,start) {
    var date1 = new Date(date);
    var date2 = new Date(start);
    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate()
  }
}

Надеюсь, это поможет вам.