[Vuejs]-Function push all data in first select of the v-for loop

by

0👍

✅

I can suggest you to change to structure of your code without using a function to build your selects.

A way to achieve it could be using templates to replicate what you did in your function.

It’s just an idea, not the working code.

Template:

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

Script:

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()
  }
}

Hope it helps you.

0👍

Your problem is that you always get the same select when pushing options.

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

SOLUTION

Assign different ids to selectors.

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

Required modifications

In template loop:

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

In template select:

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

In generateTasksAM function:

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

Leave a comment