In my Vue application, I am dealing with a nested array where users can select one date and multiple times which are saved as one object. The challenge I am facing now is how to display the selected date as a header (which works fine) and then list all the corresponding times for that date. Currently, I have only been able to display one time, but in cases where an object has multiple times, I am unable to display them all.
Is there anyone who could help me review my code?
Code snippet to display the contents of the array:
<v-card-text >
<v-row>
<v-col cols="4" v-for="(i, index) in datesFinal" >
<h4>{{i.date}}</h4>
<v-chip v-for="time in i.times">{{time.startTime + ":" + time.endTime}}</v-chip>
</v-col>
</v-row>
</v-card-text>
Script tag:
<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";
export default {
name: "NextMeetingCardComponent",
data() {
return {
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.selectedTime = [];
}
...
I believe my method is not working because I am trying to access [0], but this is just a guess on my part.