您好，如果想要实现每个单独项实现单独的show的true\false，该怎么做？

Question

问题是 showGallery 属性默认为false，但是循环后，所有的都是false， 如果点击某一个gallery， 所有的showgallery 都变成了ture， 所以只会显示最上层的那个galler（别的被覆盖在底层）。
这里需要吧每个循环项，单独设置ture or false，相互之间不影响，应该怎么操作呢？

项目是， 循环项目里，会循环 一个图片 和一个组件， 点击对应的图片回弹出对应的gallery组件。在点击回隐藏组件。

<div v-for="item of list"
:key="item.id">

<div class="item"> 
<img class="item-img " :src="item.imgUrl" @click="handleGalleryClick($index)"> 
</div>

<CommonGallery
:imgs="item.screenshots"
v-show="showGallery"
@close="handleGalleryClose"></CommonGallery>
</div> 
</div>
</template>

<script>
import CommonGallery from "./../../../common/gallery/Gallery";

export default {
name: "ProjectList",
components: {
CommonGallery
},
props: {
list: Array
},
data() {
return {
showGallery: false
};
},
methods: {

handleGalleryClick() {
this.showGallery= true;
},
handleGalleryClose() {
this.showGallery = false;
}
}
};
</script>

Answer 1

把showGallery维护成一个数组就能实现了<img&nbsp;class="item-img&nbsp;"&nbsp;:src="item.imgUrl"&nbsp;@click="handleGalleryClick(item.id)">&nbsp;<CommonGallery&nbsp;&nbsp;&nbsp;&nbsp;:imgs="item.screenshots"&nbsp;&nbsp;&nbsp;&nbsp;v-show="showGallery.includes(item.id)"&nbsp;&nbsp;&nbsp;&nbsp;@close="handleGalleryClose(item.id)"></CommonGallery>data()&nbsp;{&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;showGallery:&nbsp;[],&nbsp;&nbsp;};},methods:&nbsp;{&nbsp;&nbsp;handleGalleryClick(id)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.showGallery.push(id);&nbsp;&nbsp;},&nbsp;&nbsp;handleGalleryClose(id)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;index&nbsp;=&nbsp;this.showGallery.indexOf(id);&nbsp;&nbsp;&nbsp;&nbsp;this.showGallery.splice(index,&nbsp;1);&nbsp;&nbsp;},

Answer 2

你这是一个由对象组成的数组，你应该给每个对象加一个show的属性去控制，而不是给所有的共用一个show；