How to submit form to array and clear inputs in vue

I have a vue form inside a dialog. Where the user can select a date and multplie starting times and ending times. So far I can save one object consisting of one date and multiple times. But when I want to add another object it takes the new date but changes the time values for every object.

for example if I add first an object with 05.09.2021 start:15:00 end: 16:00 and then add another object with date: 06.09.2021 start: 16:00 end: 17:00. The start and end is changed to the latest value of all objects, but I want each of them to be individually. I tried submitting a form, but sadly I could not make it work because it is reloading the page which I do not want, if i use .prevent on submit my error with time changing for every object still consists. Could someone take a look at my code and point me my mistake out`?

HTML:

        <v-row>

          <v-col cols="12" sm="12">

                   <v-menu
                    ref="menu3"
                    v-model="menu3"
                    :close-on-content-click="false"
                    :return-value.sync="dates"
                    transition="scale-transition"
                    offset-y
                    min-width="auto"
              >
              <template v-slot:activator="{ on, attrs }" >
                <v-text-field
                  v-model="dates"
                  label="Picker in menu"
                  prepend-icon="mdi-calendar"
                  readonly
                  v-bind="attrs"
                  v-on="on"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="dates"
                no-title
                scrollable
              >
                <v-spacer/>
                <v-btn
                  text
                  color="primary"
                  @click="menu3 = false"
                >
                  Cancel
                </v-btn>
                <v-btn
                  text
                  color="primary"
                  @click="$refs.menu3.save(dates) "
                  v-on:click=" menu3 = false"
                >
                  OK
                </v-btn>
              </v-date-picker>
            </v-menu>
            <v-btn v-on:click="addTimeFields()">Add Time</v-btn>
          </v-col>

        </v-row>
        <v-row v-for="(find, index) in selectedTime" >
          <v-col
            cols="6"
            sm="6">
            <v-text-field
              v-model="find.startTime"
              label="Starttime"
              type="time"
            ></v-text-field>
          </v-col>
          <v-col
            cols="6"
            sm="6">
            <v-text-field
              v-model="find.endTime"
              label="Untiltime"
              type="time"></v-text-field>
          </v-col>
        </v-row>
        </form>

Javascript:

<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";

export default {
  name: "NextMeetingCardComponent",

  data: () => ({
    selectedTime: [],
    dates: new Date().toISOString().substr(0,10),
    datesFinal: [],
    dialog: false,
    menu: false,
    modal: false,
    menu2: false,
    menu3: false
  }),

  methods:{

    addTimeFields(){

      this.selectedTime.push({
        startTime:"",
        endTime: "",
      })
    },

    saveDateAndTIme(e){
      this.datesFinal.push({
        date: this.dates,
        times : [this.selectedTime]
        }

      )
      this.$refs.form.submit()
    },

    clearArrays(){
      while (this.selectedTime.length){
        this.selectedTime.pop()
      }
    }
  }

};
</script>

I tried clearing the selectedTimes array which is pushed to datesFinal after pushing it but then every value is deleted.

Answer

I think there’s an error in saveDateAndTIme(): times contains a nested array of the this.selectedTime array, but that should be unnested (i.e., set times to this.selectedTime itself).

After pushing this.selectedTime into datesFinal, you could clear the form by setting this.selectedTime to an empty array.

export default {
  methods: {
    saveDateAndTIme(e) {
      this.datesFinal.push({
        date: this.dates,
        times: this.selectedTime, 👈
      })
      this.selectedTime = [] 👈
    },
  }
}

demo

Advertisement

Answer