您好，如果想要实现每个单独项实现单独的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 class="item-img " :src="item.imgUrl" @click="handleGalleryClick(item.id)"> <CommonGallery    :imgs="item.screenshots"    v-show="showGallery.includes(item.id)"    @close="handleGalleryClose(item.id)"></CommonGallery>

data() {  return {    showGallery: [],  };},methods: {  handleGalleryClick(id) {    this.showGallery.push(id);  },  handleGalleryClose(id) {    const index = this.showGallery.indexOf(id);    this.showGallery.splice(index, 1);  },

Answer 2

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