Welcome to my homepage where I showcase 3 movies taken from the store, each with an "add to fav" button. My goal is to have the selected movie appear on the favorites page when clicked. As a newcomer to Vue, any code or documentation suggestions would be helpful!
Homepage:
<template>
<div>
<v-container>
<v-layout row wrap>
<v-flex lg4
v-for="item in items" :key="item.id"
>
<v-card
class="mx-auto my-12"
max-width="374"
>
<template slot="progress">
<v-progress-linear
color="deep-purple"
height="10"
indeterminate
></v-progress-linear>
</template>
<v-img
height="250"
:src="item.image"
></v-img>
<v-card-title>{{item.title}}</v-card-title>
<v-card-text>
<v-row
align="center"
class="mx-0"
>
<v-rating
:value="4.5"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>
</v-row>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-title>Description</v-card-title>
<v-card-text>
{{item.decsription}}
</v-card-text>
<v-card-actions>
<v-btn class="ml-2"
color="deep-purple lighten-2"
text
@click="favs(item.id)"
>
Add to Favs
</v-btn>
<v-btn class="ml-auto"
color="deep-purple lighten-2"
text
@click="later(item.id)"
>
Add to Watch Later
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
favs(){
this.$router.push({
path: '/fav'
})
}
},
computed:{
items(){
return this.$store.state.items;
}
}
}
</script>
Favorites Page:
template>
<div>
<v-container>
<v-layout row wrap>
<v-flex lg4
v-for="item in items" :key="item.id"
>
<v-card
:loading="loading"
class="mx-auto my-12"
max-width="374"
>
<template slot="progress">
<v-progress-linear
color="deep-purple"
height="10"
indeterminate
></v-progress-linear>
</template>
<v-img
height="250"
:src="item.image"
></v-img>
<v-card-title>{{item.title}}</v-card-title>
<v-card-text>
<v-row
align="center"
class="mx-0"
>
<v-rating
:value="4.5"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>
</v-row>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-title>Description</v-card-title>
<v-card-text>
{{item.decsription}}
</v-card-text>
<v-card-actions>
<v-btn class="ml-2"
color="deep-purple lighten-2"
text
@click="favs"
>
Add to Favs
</v-btn>
<v-btn class="ml-auto"
color="deep-purple lighten-2"
text
@click="later"
>
Add to Watch Later
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data(){
return {
}
},
computed : {
fav(){
let check= this.$store.getters.item.filter(f=>{
return f.id == item.id
})
return check
}
}
}
</script>
Store Section:
state: {
items: [
{id: 1,
title:'Free guy',
image :'Free-Guy.png',
decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},
{id: 2,
title:'true story',
image :'add.jpg',
decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},
{id: 3,
title:'starwars',
image :'st.jpeg',
decsription :'A tour stop becomes a matter of life and death for a famous comic when...