Question

我正在使用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>

Answer 1

每个画廊都有自己的模式，但是它们都有相同的id，您可以使用它来确定要打开的画廊。因此，您始终打开第一个。您需要使id唯一。

重用子组件会在父组件Vue

1 个答案: