VueJS Modal component inside component

Question

I have a component like this:

<test></test>

I declare this as follows:

Vue.component('test', {
  data: {
    showModal: true
  },
  methods: {
    displayComponentModalDialog: function() {
      this.showModal = true;
    }
  },
  template: `<button @click='displayComponentModalDialog'>test</button>`
});

The <test></test> component is then placed somewhere inside the <div id="#app"> wrapper.

var app = new Vue({
  router,
  el: '#app',
  // etc.    
})

Now, I want to display another component inside the test component. So in this case I want a dialog to appear after I click the button in test component. I am not able to achieve this.

What I did is adding a new component:

Vue.component('dialog', {
  template: '#dialog-template'
});

And then the following code, although I do not know for sure where to put it.

<!-- template for the modal component -->
<script type="text/x-template" id="dialog-template">
  <transition name="dialog">
    <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">
              default body
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="btn btn-primary" @click="$emit('close')">
                OK
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>
<!-- use the modal component, pass in the prop -->
<dialog v-if="showModal" @close="showModal = false">
  <h3 slot="header">header</h3>
  <p slot="body">
    test
  </p>
</dialog>

I tried putting this code inside the <test></test> but doesn't work. If I put it inside the template attribute in the component structure, it complains about only one root element.

So it is clear I miss some basic conception how this actually works in VueJS. Someone can help me clarify? Thanks.

Is is a method inside the test component displayComponentModalDialog: function() { this.showModal = true; }, — Ray
– Ray, Commented Nov 13, 2018 at 17:43

Simon Hyll · Accepted Answer · 2018-11-14 02:49:31Z

1

As far as I can see your component indeed doesn't have a root tag. Templates have to have a root tag.

This is NOT a valid Vue template:

<div>
    <h1>Stuff</h1>
</div>
<h2>Other stuff</h2>

This IS a valid Vue template:

<div>
    <div>
        <h1>Stuff</h1>
    </div>
    <h2>Other stuff</h2>
</div>

Note that in the second version we have a single root element for the template, a <div>, whereas in the first one we do not.

You have both a <script></script> and a <dialog></dialog> in your component template.

answered Nov 14, 2018 at 2:49

Simon Hyll

3,6563 gold badges27 silver badges49 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 01:23:29Z

0

if you want to add another component in your test component . you can use slot on it.

You can refer to this documentation: https://v2.vuejs.org/v2/guide/components-slots.html

Example:

//component 1
<template>
  <div id="modal">
    // do something for your modal here.

    <slot></slot> // reserve area for your another html or component.
  </div>
  
</template>

// component 2
<template>
   <your-modal-component>
     <another-component>
   </your-modal-component>
</template>

edited Jul 15, 2022 at 1:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 14, 2018 at 3:48

Agent Droid

811 silver badge14 bronze badges

Collectives™ on Stack Overflow

VueJS Modal component inside component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related