CODEWITHSUNDEEP
templatesvue.jsvue-component
Jquestions
Jquestions

Reputation: 1730

Can I pass an "inline-template" component into another "inline-template" component?

My thinking is that this isn't possible, or there is an extra step I am missing. Either way, I'm stuck and can't figure this out.

Reasons to use inline-templates are the ability to use Laravel Blade syntax and combine the powers of Vue Js. Seems like the best of both. A basic breakdown of structure to explain the issue:

<nav-container inline-template >
    //content

    //import this component into the party!
    <nav-topics></nav-topics>

</nav-container>

<nav-topics inline-template>
    //content
</nav-topics>

I get the console error:

Failed to mount component: template or render function not defined.

I know the component "nav-topics" is working without being an inline-template, because if I change it to a normal component which is not inline, then the content will be brought in. I have it set up in "nav-container" to "import .. from" and set the component name, as I said I can get it working without it being an inline version!

Surely you can't just have the parent's only set as "inline-template" components and not their children?

It kind of works if I use the Blade file import in the "nav-container" file, but this doesn't function correctly. I can't emit an event or the usual communication between components. 

@include('nav/_nav_topics')

Upvotes: 4

Views: 3228

Answers (2)

Enver
Enver

Reputation: 618

I had the same error, I searched for this and the solution was so simple.

<vue-dashboard inline-template>

    <button @click="create">CLK</button>
    <input type="text" >

</vue-dashboard>

I was using "inline-template" like this but the right usage was like below( I needed to add div element to in template).

<vue-dashboard inline-template>
  <div>
    <button @click="create">CLK</button>
    <input type="text" >
  </div>
</vue-dashboard>

Enjoy your coding!

Upvotes: 0

Roy J
Roy J

Reputation: 43881

They nest just fine, as long as the outer one knows about the inner one, and you have some template (either inline or in the component spec) associated with each one.

An inline-template simply overrides the spec template for the one instance it is supplied to. You can have different inline-templates for the same component in multiple places if you want.

Vue.component('dooDad', {});
Vue.component('thingAmajig', {template: '<div>Fooey</div>'});
new Vue({
  el: '#app'
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <doo-dad inline-template>
    <div>
      There's a thing-amajig here.
      <thing-amajig inline-template>
        <div>That's me</div>
      </thing-amajig>
      <thing-amajig></thing-amajig>
    </div>
  </doo-dad>
</div>

Upvotes: 3

Related Questions