Raise Error when template contains interpolation string outside of root node.

[simonmurdock]

To replicate:

• create a simple component and bind something immediately inside the template tag

<template>
    {{title}}
    <div class="example"></div>
</template>

I have been tripped up by this a couple of times (vue 2.8.0), where a simple binding outside the root div gives no output to the DOM, but also gives no error, like you would receive if you had two root nodes:

template syntax error Component template should contain exactly one root element:
...
If you are using v-if on multiple elements, use v-else-if to chain them instead.

Is there a valid reason to allow bindings like this in the root? If not it is a very small thing but it might help very new users from scratching their head like I did

[HerringtonDarkholme]

Thanks for using Vue!

If I have read correct, @simonmurdock is proposing that Vue should allow multiple nodes( e.g. text node + element node) in component root, is this right?

To my best knowledge, I'm afraid this is probably out of Vue2.0's scope. Since the code base has a strong assumption that component root has a single node. Supporting text node outside root node would not only require a total rewrite but also introduce calamitous breaking changes.

[simonmurdock]

@HerringtonDarkholme - Not that it should allow multiple nodes, just warn that the {{binding}} will have no output if placed in the root, outside of a div.

If my code is:

<template>
    {{title}}
    <div class="example"></div>
</template>

I would expect an error saying 'title cannot be rendered here as it is outside the root node'. currently it runs but produces no output

[LinusBorg]

@simonmurdock For the record, can you add a reproduction on jsfiddle? Thanks.

[simonmurdock]

I don't think I can replicate on jsfiddle as I think webpack is required to replicate.

But here is how to do it from nothing:

mkdir test
cd test
vue init webpack  //used default settings
sudo npm install

Then I change the generated Hello.vue to have some stuff immediately after the opening <template> tag like this:

<template>
  this does not output to the browser {{ msg }}
  <div class="hello">
    <h1>{{ msg }}</h1>

[meidawei]

我觉得这个例子不错