如何在vuetify芯片内部获取价值

Question

我有一个vue应用程序，我在其中显示vuetify芯片内部的信息。当我想点击一个特定的芯片时，我希望控制台记录其中的值。我试图访问信息来源的数组，但我得到了一个未定义的错误。有人能看看我的代码，告诉我它出了什么问题吗？

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>

脚本：

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>

Answer 1

将当前item作为参数传递给方法：

<v-chip
v-for="(time, i) in dateTimeArray"
:key="time"
:value="time.startTime+' | '+time.endTime"
@click="pushSelected(item)"

方法：

pushSelected(item){
console.log(item.startTime+ " " + item.endTime)
}