Vue: v-ref is not working with <template> element

[fullfs]

Don't know if it's working as planned, but I would like v-ref to work in both cases :)
Also, can't find any references in the docs about the case
http://jsfiddle.net/4ty2v4fc/52/

P.S. Thank for implementing 'wait-for' mechanism. Saved me from a lot of trouble!

[TMiguelT]

It is weird behavior but then you are trying to do something weird by having a v-component on a <template> tag. It doesn't really make sense, because <template>s are explicitly hidden from the DOM, while components are designed to add content to the DOM. And if you look at the DOM after your code runs, it appears as this:

<div><div>gfd</div></div>
<div>gfd</div>

So for some reason the <template> completely disappeared. Anyway you might want to rethink your code: If you want a component, don't put it on a <template>, and if you just want a reference to the <template> element, use v-ref instead.

[fullfs]

I don't see any problem about using v-component with <template>.
I also believe it's planned behavior that <template> itself disappears after compilation.
It's nice when you want to divide your html into files by blocks, having block's container and its contents in the same place.
And it's not like the component loses its VM context. It has one. And $el is also present. It just points to the comment node above.
So I don't see any problem having a link from v-ref for the component's VM

[yyx990803]

<template> tags are treated as symbolic wrappers for block v-if and v-repeat, it doesn't work with v-component.

[fullfs]

Okay, understood.
Another question: would you consider to make <template> support those directives, please? :)
It's really nice to use it sometimes, especially in such costructions as table/tr/td.
My guess is you could just redirect this.$el from <template> to top level element of component's template with check for just one of it. And it would render as there was no <template> at all.

[yyx990803]

I'm not sure if I understand the use case for table/tr/td - can you give an example?

[fullfs]

http://jsfiddle.net/4ty2v4fc/56/
It's about templates' placing. I keep templates in .tpl files near .js files.
From time to time I use v-component on a plain div without any classes serving as template holder. It looks like this:

<div class="something">
    <div v-component="item"> <<== this one is just a holder without any classes or visual decoration
        <!-- Item's template begin -->
        <div class="item">
            <div class="item__inner">...</div>
        </div>
        <!-- Item's template end -->
    </div>
</div>

But in the example case I'm forced to keep component item template container separated from its content (tbody is the container).
The thing is I want to keep tbody with its content in one tpl file.
But in the case I can't use extra divs in table structure.
It's the same with components whose containers are display: inline-block;

[yyx990803]

Why are you using v-component and v-ref to do that though? It seems to me you simply want to access that raw template?

You can do something like

<template id="item-template">
  <!-- template content -->
</template>

childComponent: {
  template: '#item-template'
}

Or use v-el on the template:

<template v-el="template">
</template>

// access it
this.$$.template

[fullfs]

Nah. Accessing template itself is no the case.
The case is about decomposition.
I want to decompose a page by several components: Content, TopPanel, Header, Footer, etc.
Also, there are smaller components. Using <template> as component's mount point just allows me to escape using an extra wrapper.
For example I've got a block named TopPanel. Here is its html:

<div class="top-panel">
    <ul class="top-panel__menu">
        <li class="top-panel__menu-item">Main</li>
        <li class="top-panel__menu-item">Articles</li>
        <li class="top-panel__menu-item">Feedback</li>
    </ul>
</div>

The block has its container - <div class="top-panel">. Notice its a actual part of TopPanel with its visual decoration.

So now I want to mount TopPanel to my page. And there are, actually, two ways:
First one:

...
<body>
    <div class="page">
        <div v-component="TopPanel"></div>
    </div>
</body>
...

Here we will get extra wrapper - div without any actual role or use.

And the Second one:

...
<body>
    <div class="page">
        <div class="top-panel" v-component="TopPanel"></div>
    </div>
</body>
...

Now we've got rid of extra wrapper, but TopPanel container/starting point have got detached from its content. It makes a mess in templates and preventing TopPanel from normal reusing.

And using <template> solves the problem, because it just serves as mount point and disappears after rendering

[yyx990803]

I guess you are now using replace: true :)