如何将动态变量传递给“组件”然后显示它-VueJS

Question

I can not display a variable (which is the link of an image) in my component I am lost ...

(To help you, I'm in a table and click on the icon that opens a pdf)

Thanks you !

 Vue.component('modal', { template: '#modal-template-pdf', props: { lien: String } }); let appCompta = new Vue({ data: { showModalActive: false, currentModalPdfLink: '', } }).$mount('#'+id+' #app-compta') 

 <img slot="apercu" slot-scope="props" class="iconeged main" src="images/ico_pdf.png" v-bind:currentModalPdfLink='props.row.imglien' @click="showModalActive = true" > <modal v-if="showModalActive" @close="showModalActive = false" v-bind:lien="currentModalPdfLink"> <h3 slot="header">Aperçu PDF</h3> </modal> <script type="text/x-template" id="modal-template-pdf"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> {{currentModalPdfLink}} <iframe height='100%' width='100%' frameborder='0' :src="currentModalPdfLink"/> </slot> </div> <div class="modal-footer"> <slot name="footer"> <button class="modal-default-button" @click="$emit('close')"> FERMER </button> </slot> </div> </div> </div> </div> </transition> </script> 

Answer 1

I assume that currentModalPdfLink is your pdf-link? The name of the prop that you are passing is src so you need to refer to it in your component with the same name:

Vue.component('modal', {
    template: '#modal-template-pdf',
    props: ['src']
});