Pass data to modal component on vueJS

Question

What's the best way to pass the title {{post.name}} and image post.imgAttribution from tile-component to modal-component so both elements display the same data when the button is pressed?

<div id="root" class= "container">
    <hero-component></hero-component>
    <div class="tile is-ancestor">
        <tile-component  v-for="post in posts" :key="post.id">
            <template slot="header-title">{{post.name}}</template>
            <template slot="content-photo"><img :src= "post.imgAttribution"/> </template>
            <template slot="button-modal">
                <modal-component v-show="showModal" @close="showModal = false"></modal-component>
                <a class="button is-primary" v-on:click="showModal=true">Show Cat</a>
            </template>
        </tile-component>   
    </div>
</div>

components:

var HeroComponent = Vue.component('hero-component', {
template: `
        <div>
            <section class="hero">
                      <div class="hero-body">
                        <div class="container">
                          <h1 class="title">
                            Cat Gallery
                          </h1>
                        </div>
                      </div>
            </section>
        </div>`});

    var TileComponent = Vue.component('tile-component', {
        template:`
        <div>
              <div class="tile is-parent">
                <article class="tile is-child box">
                    <p class="title">
                    <slot name="header-title"></slot>
                </p>
                <p class="content-photo">
                    <slot name="content-photo"></slot>
                </p>
                    <slot name="button-modal"></slot>
            </article>  
          </div>
        </div>
    </div>`});

    var ModalComponent = Vue.component('modal', {
    template: `
    <div>
        <div class="modal is-active">
            <div class="modal-background"></div>
                <div class="modal-card">
                    <header class="modal-card-head">
                        <p class="modal-card-title">
                            <!-- title from tile-component -!>
                        </p>
                    <button class="modal-close" @click="$emit('close')" ></button>
                    </header>
                    <section class="modal-card-body">
                        <div class="modal-content">
                            <p class="image is-4by3">
                                <!-- image from tile-component -!></p>
                        </div>
                    </section>
                </div>
            </div>
    </div>`});

    Vue.component('modal-component', ModalComponent);

    new Vue({   
        el: '#root',
        data: {
            showModal: false,
            posts: [],
            errors: []
        },
        component: {
            'hero-component': HeroComponent,
            'modal-component': ModalComponent,
            'tile-component': TileComponent
        },
        created() {
            axios.get('http://localhost:3000/Cat/')
            .then(response => this.posts = response.data)
            .catch(e => this.error.push(e));
        }
    });

Bert · Accepted Answer · 2017-05-26 02:21:33Z

1

You're already using slots, why not continue?

var ModalComponent = Vue.component('modal', {
    template: `
      <div>
        <div class="modal is-active">
          <div class="modal-background"></div>
          <div class="modal-card">
            <header class="modal-card-head">
              <p class="modal-card-title">
                <slot name="title"></slot>
              </p>
              <button class="modal-close" @click="$emit('close')" ></button>
            </header>
            <section class="modal-card-body">
              <div class="modal-content">
                <p class="image is-4by3">
                  <slot name="image"></slot>
                </p>
              </div>
            </section>
          </div>
        </div>
      </div>
`});

And pass the values this way. Here I'm using a header and an img element, but you could do what you want.

<modal-component v-show="showModal" @close="showModal = false">
    <h1 slot="title">{{post.name}}</h1>
    <img slot="image" :src="post.imgAttribution" alt="" />
</modal-component>

answered May 26, 2017 at 2:21

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manoxs Over a year ago

Great it works well, thanks! The issue now is that modal-component it only displays the last item in the posts. Did you have a clue to fix that?

Bert Over a year ago

@Manoxs its not that the last one is shown, its that all are shown. All your modals work off one value, showModal. Here's one way you might get around that. codepen.io/Kradek/pen/xdeGmy?editors=1010

Collectives™ on Stack Overflow

Pass data to modal component on vueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related