2022-03-03 18:05:50 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2022-03-03 23:13:14 +00:00
|
|
|
<v-list-item v-for="(video, index) in videos" :key="index">
|
2022-03-04 02:25:30 +00:00
|
|
|
<v-card class="entry">
|
2022-03-04 02:07:53 +00:00
|
|
|
<v-card-title v-text="video.raw.compactVideoRenderer.title.runs[0].text" />
|
2022-03-03 23:13:14 +00:00
|
|
|
<v-card-text>
|
2022-03-04 02:07:53 +00:00
|
|
|
<v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
|
|
|
|
<p v-text="video.id" />
|
|
|
|
<p v-text="video.uploaded" />
|
|
|
|
<p v-text="video.runtime" />
|
|
|
|
<p v-text="video.views" />
|
2022-03-03 23:13:14 +00:00
|
|
|
</v-card-text>
|
|
|
|
</v-card>
|
|
|
|
</v-list-item>
|
2022-03-03 18:05:50 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-03-04 02:25:30 +00:00
|
|
|
<style scoped>
|
|
|
|
.entry {
|
|
|
|
margin: 1em;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2022-03-03 18:05:50 +00:00
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
2022-03-03 23:13:14 +00:00
|
|
|
videos: []
|
2022-03-03 18:05:50 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
2022-03-04 02:25:30 +00:00
|
|
|
const searchQuestion = this.$route.query.q
|
|
|
|
|
2022-03-03 18:05:50 +00:00
|
|
|
const vm = this;
|
2022-03-04 02:25:30 +00:00
|
|
|
this.$youtube.search(searchQuestion, (data) => {
|
2022-03-03 23:13:14 +00:00
|
|
|
vm.videos = data;
|
2022-03-03 18:05:50 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|