OMDB Movie Info
Show information for your favourite films & movies.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<v-layout> | |
<v-flex> | |
<v-card> | |
<v-img :src="movie.Poster"></v-img> | |
<v-card-title primary-title> | |
<div> | |
<h3 class="headline mb-0">{{movie.Title}}</h3> | |
<div>{{movie.Plot}}</div> | |
</div> | |
<div> | |
<v-list> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Year}}</v-list-tile-title> | |
<v-list-tile-sub-title>Year</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Actors}}</v-list-tile-title> | |
<v-list-tile-sub-title>Actors</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Director}}</v-list-tile-title> | |
<v-list-tile-sub-title>Director</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Writer}}</v-list-tile-title> | |
<v-list-tile-sub-title>Writers</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Production}}</v-list-tile-title> | |
<v-list-tile-sub-title>Production</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Website}}</v-list-tile-title> | |
<v-list-tile-sub-title>Website</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Runtime}}</v-list-tile-title> | |
<v-list-tile-sub-title>Runtime</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Rated}}</v-list-tile-title> | |
<v-list-tile-sub-title>Rated</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Released}}</v-list-tile-title> | |
<v-list-tile-sub-title>Released</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.DVD}}</v-list-tile-title> | |
<v-list-tile-sub-title>DVD</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Country}}</v-list-tile-title> | |
<v-list-tile-sub-title>Country</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Genre}}</v-list-tile-title> | |
<v-list-tile-sub-title>Genre</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Awards}}</v-list-tile-title> | |
<v-list-tile-sub-title>Awards</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.imdbID}}</v-list-tile-title> | |
<v-list-tile-sub-title>IMDBid</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.imdbRating}}</v-list-tile-title> | |
<v-list-tile-sub-title>IMDB Rating</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.imdbVotes}}</v-list-tile-title> | |
<v-list-tile-sub-title>IMDB Votes</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
<v-list-tile @click=""> | |
<v-list-tile-content> | |
<v-list-tile-title>{{movie.Metascore}}</v-list-tile-title> | |
<v-list-tile-sub-title>Metascore</v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
</v-list> | |
</div> | |
</v-card-title> | |
</v-card> | |
</v-flex> | |
</v-layout> | |
</div> | |
</template> | |
<script> | |
module.exports = { | |
name: 'ComponentName', | |
props: { | |
title: { | |
type: String, | |
default: "Happy Gilmore" | |
}, | |
year: { | |
type: String, | |
default: "1996" | |
}, | |
ENV: { | |
type: Object, | |
hidden: true | |
} | |
}, | |
data: function () { | |
return { | |
movie: {} | |
} | |
}, | |
mounted: function() { | |
this.getMovie(); | |
}, | |
methods: { | |
getMovie() { | |
let apikey = this.ENV["OMDB_APIKEY"]; | |
var params = { | |
y: encodeURI(this.year), | |
t: encodeURI(this.title) | |
} | |
this.$http.get('http://www.omdbapi.com/?t=' + params.t + '&y=' + params.y + '&apikey=' + apikey) | |
.then( | |
function(result){ | |
console.log(result.body); | |
this.movie = result.body; | |
}, | |
function(error){ | |
console.log(error.description); | |
}); | |
} | |
}, | |
computed: {} | |
} | |
</script> | |
<style scoped> | |
/* styles here */ | |
</style> |