テンプレートは常にフラグメントです

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-ブランチを追加し、私はこのようなこの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

私はそれが役に立てば幸い！