I have a Vue application that utilizes Vuetify chips to display information. I'm trying to log the value inside a specific chip when it is clicked, but I keep getting an undefined error when trying to access the array where the information comes from. Can someone please review my code and help me identify the issue?
HTML:
<v-chip-group
v-model="selection"
active-class="deep-purple--text text--accent-4"
mandatory
>
<v-chip
v-for="(time, i) in dateTimeArray"
:key="time"
:value="time.startTime+' | '+time.endTime"
@click="pushSelected()"
>
{{ time.startTime +" : "+ time.endTime }}
</v-chip>
</v-chip-group>
Script:
export default {
name: "MeetingAdminComponent",
data : ()=>({
singleSelect: false,
selection: "",
dateTimeArray:[],
availableTimes: [
],
}),
created() {
this.getAvailableMeetingTimes()
},
methods:{
getAvailableMeetingTimes() {
var pageURL = window.location.href;
var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
axios.get("http://localhost:8080/api/voterAvailableTime/findBy", {
params: {
meetingName: lastURLSegment,
}
})
.then(response => (this.availableTimes = response.data)
)
},
getTimesFilteredByDate() {
var pageURL = window.location.href;
var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
var selectedDate = this.selectedDate
axios.get("http://localhost:8080/api/voterAvailableTime/find", {
params: {
meetingName: lastURLSegment,
date: selectedDate
}
})
.then(response => (this.dateTimeArray = response.data))
},
pushSelected(){
console.log(this.availableTimes.startTime+ " " + this.availableTimes.endTime)
}
}
};
</script>