[Vuejs]-Trying to add day by day when adding new row in vue js

by

0👍

✅

From what I read is, the wrong here is the logic

addRow() {
        
        this.rows.push({
          time_in:"07:00",
          time_out:"16:00",
          date:'2020-09-17',
        })
    
      }; ==> this just push a row

   AddingDate(value){
        var date = new Date(value)
        let newdate = date.setDate(date.getDate() + 1)
        return  new Date(newdate).toISOString().slice(0,10)

        } ==> this add one day every row you provide

I believe what you want is to create a day


export default {
      data(){
        return{
          lastDate: new Date(), <== here to set lastDate
          rows:[],    

        }
      },methods:{   

    addRow() {
if(this.rows.length){
         let row = this.rows[this.rows.length -1];
         let date = new Date(row.date)
         let newdate = date.setDate(date.getDate() + 1);
         this.lastDate = new Date(newdate).toISOString().slice(0,10)
} else {
   this.lastDate = new Date().toISOString().slice(0,10);
}
         let newdata = {
          time_in:"07:00",
          time_out:"16:00",
          paid: this.lastDate,
        })
        this.rows.push(newdata);
      }

        }
       

    }

use the value normally like the other input

0👍

try this i tested it.

use Date object so you can manipulate date and add to new row

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th>
                <button type="button" class="btn btn-sm btn-primary" @click="addRow">+</button>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(row, index) in rows" :key="row.id">
            <td>
                <input type="date" style="width:170px;" class="form-control" v-model="row.date" />
            </td>
            <td>
                <input type="time" class="form-control" v-model="row.time_in" />
            </td>
            <td>
                <input type="time" class="form-control" v-model="row.time_out" />
            </td>
            <td>
                <button type="button" @click="removeElement(index);" class="btn btn-danger btn-sm">X</button>
            </td>
        </tr>
    </tbody>
</table>

in javascript

export default {
    data() {
        return {
            rows: [
                {
                    time_in: "07:00",
                    time_out: "16:00",
                    date: new Date().toISOString().slice(0, 10),
                },
            ],
        };
    },
    methods: {
        addRow() {
            let index = this.rows.length - 1;
            let lastDate = this.rows[index];
            let oldDate = new Date(lastDate.date);
            oldDate.setDate(oldDate.getDate() + 1);
            this.rows.push({
                time_in: "07:00",
                time_out: "16:00",
                date: oldDate.toISOString().slice(0, 10),
            });
        },
    },
};

Leave a comment