how to display every value of an nested array

user_11701675 0
Viewed 126

In my vue application I have a nested array where the user can select one date and multiple times and this is saved as one object. What I want to achieve now is to display the date as a header (Works) and under it display all times belonging to that specific date. Right now I could only make it work with one time. But if one object has multiple times I still could only make it work to show one time.

Could someone take a look at my code?

code to display the insides of the array:

 <v-card-text >
     <v-row>
      <v-col cols="4" v-for="(i, index) in datesFinal" >
        <h4>{{i.date}}</h4>
        <v-chip>{{i.times[0].startTime + ":" + i.times[0].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: () => ({
        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  = [];
        }

My method does not work because I am telling it to access [0] but this is just my guess

vuetify.js vue.js typescript javascript
2 Answers

You could try this solution::

<v-card-text>
    <v-row>
      <v-col cols="4" v-for="(item, index) in datesFinal" :key="index" >
        <h4>{{item.date}}</h4>
        <v-chip-group v-if="item.times.length !== 0">
          <v-chip v-for="(time, i) in item.times" :key="i">
            {{time.startTime + ":" + time.endTime}} 
          </v-chip>
        </v-chip-group>
        <v-chip-group v-else>
          <v-chip>no times </v-chip>
        </v-chip-group>
      </v-col>
    </v-row>
  </v-card-text>
user_159579110

Ummm, I think I can provide a thinking that maybe you can use Set to filter the same date. Then use every item of this set to gather the same date's time from the object.

user_118474160
Related