Vue将电影添加到收藏夹中
Vue将电影添加到收藏夹中
提问于 2021-12-01 19:41:15
我有一个主页，其中我有3部电影(从商店传递)，每部电影都有一个加法页按钮。所以，我想要做的是，当我点击添加电影到fav按钮，我转到我的fav页面，电影应该在那里。我是Vue的新手，如果我的代码不是最好的，我很抱歉。即使是文件建议，也将不胜感激！
主页：
<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页：
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>商店：
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
}
},回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-01 20:26:07
如果我理解您正在寻找的行为，请尝试如下:在fav数组中创建一个items值。
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
},然后，当您单击Add时，使用mutation将此布尔值状态更改为true
mutations {
addToFav: (state, id) => {
state.items[state.items.findIndex(item => item.id == id)].fav = true;
}
}把这里叫做mutation
methods: {
favs(id){
this.$store.commit("addToFav", id)
this.$router.push({
path: '/fav'
})
}
},在fav页面中，您通过这个fav调用过滤过的存储项，比如Collbrothers。
computed: {
items(){
return this.$store.state.items.filter(item => item.fav);
}
}或者创建一个特定的getter，以只查看受欢迎的电影。
Stack Overflow用户
发布于 2021-12-01 19:50:35
看起来您从来没有在"fav“页面中真正定义过items，或者在data方法中定义它，或者用$store.state.items替换条目！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70190317
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号