[Vuejs]-Vue push into nested array

0👍

✅

I think there are a couple of issues.

  1. time is not an array, it is an object
  2. You don’t have 2 dates in the array, so probably want the 0 based index.

#2 is where the error is coming from.

      addTimeFields(){

        this.dates[0].time.push({
          startTime: "",
          untilTime: "",
        })
      }

Since your first entry already has start and until times set, to update you just need to to:

  this.dates[0].time = {
    startTime: "",
    untilTime: "",
  }
or

  this.dates[0].time.startTime = "",
  this.dates[0].time.untilTime = "",

EDIT one

I created a code pen for your code, there are quite a few errors, probably around the setup, but this screenshot shows what happens if you add two dates into the array. You get a list of them at the top, and then a list of the times. This makes me think you probably are just wanting one?
screenshot when adding two dates into array

Please see this pen, https://codepen.io/OblivionSY/pen/rNyOLpw?editors=1011 it is not amazing, and doesn’t fully work (date picker has an error)

Some general notes though:

  1. make sure your :key value are primitive (string, int etc) and unique
  2. try and split up the functionality into components. If you have multiple dates, then have one component to deal with editing a single date and the respective times.

feel free to edit the pen if you want me to take another look.

Leave a comment