我有两个单文件组件,一个用于模式主体,另一个是使用该文件并在其中动态加载值的卡片列表。
这里是imageModal.vue
,主要是样板引导程序。
<template>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" @click.prevent="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="close">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
export default {
name: 'imageModal',
methods: {
close() {
this.$emit('close');
}
}
}
</script>
这是使用它的tile.vue
组件。
<template>
<div class="container-fluid">
<ul class="gallery justify-content-center list-group-flush">
<li class="mb-1 pics" v-for="post in postsWithPreview" v-bind:key="post.data.id">
<div class="card" @click.prevent="showModal">
<img :src="post.data.preview.images[0].source.url.replace('amp;s', 's')" class="img-fluid" alt="">
</div>
</li>
</ul>
<imageModal v-if="modalVisible"/>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import imageModal from '@/components/imageModal.vue'
const axios = require('axios')
const baseURL = "https://www.reddit.com/r/wallpapers.json"
export default {
name: 'tile',
props: {
msg: String
},
data() {
return {
modalVisible: false,
postObjList: []
}
},
components: {
imageModal,
},
created() {
axios.get(baseURL)
.then(response => {
this.postObjList = response.data.data.children
console.log(this.postObjList)
console.log(this.postsWithPreview)
})
},
methods: {
showModal() {
this.modalVisible = true
},
closeModal() {
this.modalVisible = false
}
}
}
</script>
但是当我单击图像卡时,什么也没发生。这是怎么回事而且,有没有更好的方法可以做到这一点? 我想制作一个动态模态,该模态将包含与单击的卡相同的图像,以及卡上的一些其他信息。