Vue.js 重用子组件会在父组件Vue中生成多个相同的数据

我正在主组件（父组件）内部使用库组件（子组件）。问题是，当我点击这些图像时，模态图像仅在2019年能正常工作，其他年份则不能。当我检查Vue数据时，我意识到在复制子组件时，每年都有多个“selectedImage”数据。我如何克服这个问题？第一次使用Vue组件。提前谢谢

主组件（父级）

从“./Gallery”导入库
导出默认值{
组成部分：{
“画廊标签”：画廊
}
}

库组件（子项）

导出默认值{
数据（）{
返回{
图像：[]，
选择图像：“”
}
},
道具：{
今年：字符串，
},
方法：{
openImageModal（图像）{
选择此选项。选择图像=图像；
$（'#imageModal'）.modal（'show'）；
},
getAllYearImage（）{
get（'/api/gallery/getAllYearImage/'+this.intYear）。然后（响应=>{
this.images=response.data；
});
}
},
安装的（）{
console.log（'组件已安装'）
},
创建（）{
这个.getAllYearImage（）
}
}

每个库都有自己的模式，但它们都有相同的

id

，您可以使用该id来标识要打开的库。所以你总是打开第一个。您需要使

id

s唯一

<template>
<div class="container-fluid">
    <gallery-tag intYear="2019"></gallery-tag>
    <gallery-tag intYear="2018"></gallery-tag>
    <gallery-tag intYear="2017"></gallery-tag>
    <gallery-tag intYear="2016"></gallery-tag>
    <gallery-tag intYear="2015"></gallery-tag>
    <gallery-tag intYear="2014"></gallery-tag>
    <gallery-tag intYear="2013"></gallery-tag>
    <gallery-tag intYear="2012"></gallery-tag>
    <gallery-tag intYear="2011"></gallery-tag>
    <gallery-tag intYear="2010"></gallery-tag>
</div>
</template>

<script>
import Gallery from './Gallery'

export default {
    components: {
        'gallery-tag' : Gallery
    }
}
</script>

<template>
<div class="row justify-content-center border-top border-bottom border-white bg-custom">
    <div class="container-fluid  mt-5">
            <a v-bind:href="'#Gallery'+intYear" data-toggle="collapse" class="text-center text-white text-decoration-none"><h1>{{intYear}}</h1></a>
        <br>
        <div v-bind:id="'Gallery'+intYear" class="collapse p-2">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-xs-6 col-6 thumb mb-4" v-for="image in images" v-bind:key="image.id">
                    <a href="#imageModal" @click="openImageModal(image)" class="fancybox" rel="ligthbox">
                        <img :src="'/img/stalwart/' + image.file_name" class="zoom img-fluid "  alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!------------------------------ IMAGE MODAL-------------------------------->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
              <img :src="'/img/stalwart/' + this.selectedImage.file_name" class="img img-responsive mx-auto">
        </div>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            images:[],
            selectedImage:''
        }
    },
    props:{
        intYear: String,
    },
    methods:{
        openImageModal(image){
            this.selectedImage=image;
            $('#imageModal').modal('show');
        },
        getAllYearImage(){
            axios.get('/api/gallery/getAllYearImage/' +this.intYear).then(response => {
                this.images=response.data;
            });
        }
    },
    mounted() {
        console.log('Component mounted.')
    },
    created(){
        this.getAllYearImage()
    }
}
</script>