2016-07-07 8 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 구성 요소 전화 :

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 번이 오류는 템플릿 내 콘텐츠 주위에 div를 배치하여 발생했습니다. 따라서 한번 시도해 볼 가치가 있습니다. –

+0

예제가 완료 되었습니까? 아무것도 남기지 않았습니까? 예 : 루트 엘리먼트의'v-for' 또는'v-if'도 신뢰할 수있는 루트 엘리먼트가 없기 때문에 그것을 fragment 인스턴스로 만든다. 그렇지 않으면 더 이상 분석 할 수 없으므로이 오류를 재현 할 수있는 예가 필요합니다. –