VueTube/NUXT/pages/search.vue

41 lines
837 B
Vue
Raw Normal View History

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">
<v-card-title v-text="video.raw.compactVideoRenderer.title.runs[0].text" />
2022-03-03 23:13:14 +00:00
<v-card-text>
<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>