Skip to content

Instantly share code, notes, and snippets.

@nuria-fl
Created June 30, 2017 17:12
Show Gist options
  • Save nuria-fl/372ab1539f406376b83b05288235f6e7 to your computer and use it in GitHub Desktop.
Save nuria-fl/372ab1539f406376b83b05288235f6e7 to your computer and use it in GitHub Desktop.
Vue tutorial: Marcar película como favorita
<template>
<div>
<dropdown :items="genres" :selected.sync="selectedGenre"></dropdown>
<movie v-for="movie in filteredMovies" :movie="movie"></movie>
</div>
</template>
<script>
import api from '@/services/api'
import dropdown from './Dropdown'
import movie from './Movie'
export default {
data () {
return {
movies: [],
genres: [],
selectedGenre: null
}
},
components: {
dropdown,
movie
},
created() {
api.getMovies().then(data => {
this.movies = data
})
api.getGenres().then(data => {
this.genres = data
})
},
computed: {
filteredMovies() {
if (this.selectedGenre) {
const genre = parseInt(this.selectedGenre)
return this.movies.filter( movie => {
return movie.genre_ids.indexOf(genre) !== -1
})
} else {
return this.movies
}
}
}
}
</script>
<template>
<article>
<button class="movies__like" @click="saveMovie()">
<i :class="movie.saved ? 'fa fa-check' : 'fa fa-star'"></i>
</button>
<span v-show="movie.saved">lalala</span>
<img :src="`https://image.tmdb.org/t/p/w500/${movie.poster_path}`" alt="">
</article>
</template>
<script>
import Vue from 'vue'
export default {
props: ['movie'],
methods: {
saveMovie() {
this.$set(this.movie, 'saved', true)
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment