我正在构建我的第一个Vue应用程序。我有一些React的经验，我正试图在Vue中制作一个简单的电影列表。
我的应用程序中有两个错误-都与按钮切换有关:
-
OnClick我想改变隐藏，并显示另一个图像。我只能切换一次。它拒绝返回到中性状态。
-
OnClick我想切换显示视频。它工作正常-打开一个视频按钮点击，然后如果我点击另一个按钮，它关闭旧的视频，并显示新的。但是一旦我打开了所有4个视频，我就不能显示或关闭任何其他视频了。
似乎每个元素只能切换一次。
我错过了什么吗?
<template>
<div v-for="(name, index) in movies" :key="index" class="movieContainer">
<div class="center">
{{ name.name }} {{ name.duration }}
<button
@click="name.hideImg = !name.hideImg && toggle(name.id)"
class="watchBtn"
>
<p v-if="name.hideImg">►</p>
<p v-else>▼</p>
</button>
</div>
<div v-show="name.id == open">
<video controls="controls" autoplay name="media">
<source
:src="require(`@/assets/movie${index + 1}.mp4`)"
alt="video"
type="video/mp4"
width="500px"
/>
</video>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
toggle(id) {
this.open = this.open === id ? null : id;
},
},
data() {
return {
movies: [
{
name: "Pokemon",
duration: "1hr 12min",
hideImg: true,
open: null,
id: 1,
},
{
name: "Digimon",
duration: "2hr 37min",
hideImg: true,
open: null,
id: 2,
},
{
name: "Transformers",
duration: "1hr 51min",
hideImg: true,
open: null,
id: 3,
},
{
name: "Kiepscy",
duration: "1hr 51min",
hideImg: true,
open: null,
id: 4,
},
],
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 60px auto 0;
}
.watchBtn {
background-color: red;
border-radius: 10px;
margin-left: 10px;
height: 20px;
display: flex;
align-items: center;
}
.watchBtn:hover {
background-color: rgb(255, 191, 107);
cursor: pointer;
}
.movieContainer {
margin: 5px auto;
display: flex;
flex-direction: column;
}
.center {
margin: 0 auto;
display: flex;
}
.movieContainer video {
width: 500px;
}
</style>
有一些快速的事情可能会有所帮助。你的toggle()可以清理一下。您可以在toggle()方法中执行这两个操作。
您访问视频的方式不正确。this.open正在寻找一个名为open的数据属性在你的data()的顶层，它没有找到它。因此，您需要深入movies以获得正确的属性。
同样，你的电影索引从1开始，但循环从0开始，所以东西偏离1
我把StackBlitz放在一起，这样你就可以看到我在说什么了。
下面是留给后人的代码:
<template>
<div v-for="(movie, index) in movies" :key="index" class="movieContainer">
<div class="center">
{{ movie.name }}
<button
@click="toggle(movie.id)"
class="watchBtn"
>
<p v-if="movie.hideImg">►</p>
<p v-else>▼</p>
</button>
</div>
<div v-show="movie.open">
<!-- <video controls="controls" autoplay name="media">
<source
:src="require(`@/assets/movie${index + 1}.mp4`)"
alt="video"
type="video/mp4"
width="500px"
/>
</video> -->
<h2>It's Working!</h2>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
toggle(id) {
this.movies[id - 1].hideImg = !this.movies[id - 1].hideImg
this.movies[id - 1].open = !this.movies[id - 1].open
},
},
data() {
return {
movies: [
{
name: "Pokemon",
duration: "1hr 12min",
hideImg: true,
open: false,
id: 1,
},
{
name: "Digimon",
duration: "2hr 37min",
hideImg: true,
open: false,
id: 2,
},
{
name: "Transformers",
duration: "1hr 51min",
hideImg: true,
open: false,
id: 3,
},
{
name: "Kiepscy",
duration: "1hr 51min",
hideImg: true,
open: false,
id: 4,
},
],
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 60px auto 0;
}
.watchBtn {
background-color: red;
border-radius: 10px;
margin-left: 10px;
height: 20px;
display: flex;
align-items: center;
}
.watchBtn:hover {
background-color: rgb(255, 191, 107);
cursor: pointer;
}
.movieContainer {
margin: 5px auto;
display: flex;
flex-direction: column;
}
.center {
margin: 0 auto;
display: flex;
}
.movieContainer video {
width: 500px;
}
</style>
我注释掉了测试视频，因为我在本地没有它。但我认为这个切换按钮工作如预期。