Повторное использование дочернего компонента создает несколько одинаковых данных внутри родительского компонента Vue

Question

Я использую компонент Gallery (дочерний) внутри компонента Home (родительский).Проблема в том, что когда я нажимаю на изображения, модальное изображение отлично работает только для 2019 года, а в другие годы - нет.Когда я проверил данные Vue, я понял, что есть несколько данных «selectedImage» для каждого года, так как я дублирую дочерние компоненты.Как мне преодолеть это?Впервые с использованием компонентов Vue.Заранее спасибо.

Домашний компонент (родительский)

<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>

Answer 1

У каждой галереи есть свой модал, но все они имеют одинаковый id, который вы используете, чтобы определить, что открыть.Таким образом, вы всегда открываете первый.Вам нужно сделать id уникальным.