I have a home page where I have 3 movies(passed from store) each of these movies has an add to fav page button. So what I want to do is when I click on the add movie to fav button and I go to my fav page the movie should be there. I am new to Vue so sorry if my code is not the best. even document recommendations would be appreciated!
home page:
<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>
fav 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:
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 the fallout from a night with his brother threatens to destroy everything he is built.'},
]
},
getters :{
items(s) {
return s.items
}
},
If I understand the behavior you are looking for, try this:
Create a fav value in the items array.
items: [
{
id: 1,
title: 'Free guy',
image: 'Free-Guy.png',
description: '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.',
fav: false
},
{
id: 2,
title: 'true story',
image: 'add.jpg',
description: '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.',
fav: false
},
{
id: 3,
title: 'starwars',
image: 'st.jpeg',
description: '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.',
fav: false
},
Then when you click on Add to fav change the state of this boolean to true with a mutation
mutations {
addToFav: (state, id) => {
state.items[state.items.findIndex(item => item.id == id)].fav = true;
}
}
Call this mutation here
methods: {
favs(id){
this.$store.commit("addToFav", id)
this.$router.push({
path: '/fav'
})
}
},
And in the fav page you call the filtered stored items by this fav like say Collbrothers
computed: {
items(){
return this.$store.state.items.filter(item => item.fav);
}
}
Or create a specific getter to see only the faved movies