2016-07-07 73 views
2

我在一个小项目中使用Vue和Brunch,今天我决定添加Vueify以使我的组件更加简洁。模板始终是片段

但他们总是看到有片段实例,所以他们不呈现。

<template lang="pug"> 
    div.sticker-container.sticker-xs-container.nav-top-sticker-animate#btn-about(v-bind:href="link") 
     span.sticker.sticker-xs.sticker-dark 
      span.sticker-txt.sticker-xs-txt(v-html="locales.btns.open") 
     span.sticker.sticker-xs.sticker-over.sticker-over-xs.sticker-light(v-show="opened") 
     span.sticker-txt.sticker-xs-txt.sticker-light-txt(v-html="locales.btns.close") 
</template> 

<script> 
export default { 
    data(){ 
    return { 
     disabled: false, 
     link: '#' 
    } 
    } 
} 
</script> 

要使用Vueify我只是Vue的早午餐添加到我的项目,我把这个VUE组件是这样的:

import bar from './foo/bar' 
Vue.component('sticker-bar', bar) 

所以,我做错了吗?

回答

1

尝试在您的模板中添加一个环绕的div。像这样:

<template> 
    <div> 
     <content></content> 
    </div> 
</template> 

大多数情况下,这将解决片段实例错误。

如需更详细的信息:https://vuejs.org/guide/components.html#Fragment-Instance

我希望它能帮助!

+0

我的模板已经包含在一个div中,我需要另一个? :o – Awea

+0

9/10(满分为10)我通过在模板中放置div来放置我的内容,导致出现此错误。所以值得一试。 –

+0

你的例子是否完整,你有没有遗漏任何东西?例如。根元素上的'v-for'或'v-if'也使它成为片段实例,因为没有可靠的根元素。 否则,它看起来很好,所以为了进一步分析,我们需要一个可以轻松再现此错误的示例。 –