重用子组件在父组件Vue中产生多个相同的数据答案

【问题标题】：Reusing child component produces multiple same data inside parent component Vue重用子组件在父组件Vue中产生多个相同的数据
【发布时间】：2020-01-20 07:05:12
【问题描述】：

我在 Home 组件（父组件）中使用了 Gallery 组件（子组件）。问题是，当我单击图像时，模态图像仅适用于 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>

【问题讨论】：

标签： vue.js components

【解决方案1】：

每个画廊都有自己的模式，但它们都有相同的id，您可以使用它来确定要打开哪个。所以你总是打开第一个。您需要使 ids 独一无二。

【讨论】：