Question

Vue.JS v-for循环后，想要实现每个单独项实现单独的show的true\false

问题是 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);
  },

追问

谢谢，目前打开各项可以，但是close这个回报错，没法关闭。
TypeError: this.showGallery.indexof is not a function

Answer 2

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

追问

嗯，我也考虑过，但是在json文件中加个这属性，感觉有点奇怪~可有别的方法？
目前我的数据是父组件接受的json，然后传到了这个子组件中。

追答

要独立控制，就只能有独立的属性去作为开关，不然没法实现吧；我目前就只想到了这种