godevo
150
3
Vue

Can't passing value object to custom component

Posted 3 years ago by godevo

Hi all, I'm new with vuejs and I try it with make view image with modal bootstrap dynamically. This is my code

    <div class="album-grid center-block">
                    @foreach($images as $key=>$value)
                    <a href="#" class="images-unit" @click="viewImage('{{ $value->images->standard_resolution->url }}','{{
                    $value->caption->text }}')">
                        <figure>
                            <img src="{{ $value->images->standard_resolution->url }}" width="200">
                            <figcaption>
                                <h3>{{ substr($value->caption->text,0,15) }}</h3>
                            </figcaption>
                        </figure>
                    </a>
                    @endforeach
                </div>

<modal v-show="modalIsOpen"></modal>
        <template id="template-modal">
            <div class="modal u-overlay animated" v-show="modalIsOpen">
                <div class="container">
                    <div class="row display-flex">
                        <div class="col-lg-6 no-padding">
                            <img v-bind:src="imageURL" class="img-responsive">
                        </div>
                        <div class="col-lg-6 bg-white">
                            <div class="header-modal">
                                <a class="close-button-modal" @click="closeModal">
                                <i class="fa fa-close"></i>
                                </a>
                                <img src="https://s-media-cache-ak0.pinimg.com/avatars/vbhuana_1404822803_140.jpg">
                                <h3>VISITAMA BHUANA</h3>
                                <span>Plakat Makassar</span>
                            </div>
                            <div class="content-modal">
                                <p>@{{ caption }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
Vue.component('modal',{
        template : '#template-modal',
        created : function(){
            this.closeModal();
        },
        methods : {
            closeModal : function(){
                this.$root.modalIsOpen=false;
            }
        }
    })
    new Vue({
        el : '#app',
        data : {
            modalIsOpen : false,
            imageURL : null,
            caption : null
        },
        methods : {
            viewImage : function(imageSrc,captionText){
                this.modalIsOpen = true;
                this.imageURL = imageSrc;
                this.caption = captionText;
            }
        }
    });

The modal success to showing up but not with image and caption in the modal. I hope someone help me :(

Please sign in or create an account to participate in this conversation.