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

Question

我无法在component Vue.component('modal', { template: '#modal-template-pdf', props: { lien: String } }); let appCompta = new Vue({ data: { showModalActive: false, currentModalPdfLink: '', } }).$mount('#'+id+' #app-compta') 中显示变量（图像的链接）...

（为了帮助你，我在桌子上并点击打开pdf的图标）

谢谢！

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

df.groupby(level=[0,1]).sum()

Answer 1

我认为currentModalPdfLink是你的pdf链接？ 您传递的道具名称为src，因此您需要在组件中使用相同名称引用它：

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