Question

我在一个小项目中使用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-brunch添加到我的项目中，我就像这样调用这个vue组件：

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

那么，我做错了什么？

Answer 1

尝试在模板中添加周围的div。像这样：

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

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

有关详细信息：https://vuejs.org/guide/components.html#Fragment-Instance

我希望它有所帮助！

模板总是片段化

1 个答案: