2016-05-14 13 views
2

私はvue-loaderを使用していますが、コンポーネントで使用するためにapp.jsのディレクティブを作成していますが、コンポーネント内のそのディレクティブを使用します。Vue Js:vue-loaderのコンポーネントでディレクティブを使用

私はこのメッセージを受信して​​います:

vue.common.js?e881:1014 [Vue warn]: Failed to resolve directive: swiper (found in component: <testimonial-comp>) 

app.js

​​

App.vue

<template lang="jade"> 
    testimonial-comp 
</template> 

<script> 
    import TestimonialComp from './components/Testimonial.vue' 

    export default { 
     components: { 
      TestimonialComp 
     } 
    } 
</script> 

<style lang="stylus" scoped> 

</style> 

Testimonial.vueを

<template lang="jade"> 
    article#testimonial 
    .swiper-container(v-swiper) 
     .swiper-wrapper 
     .swiper-slide Slide 1 
     .swiper-slide Slide 2 
     .swiper-slide Slide 3 
     .swiper-pagination 
     .swiper-button-prev 
     .swiper-button-next 
     .swiper-scrollbar 

</template> 

<script> 
    import Swiper from 'Swiper/dist/js/swiper.min.js' 

</script> 
<style lang="stylus"> 

</style> 

私があなたを助けてくれることを願っています。

+0

これについて進歩しましたか? – gurghet

+0

@gurghetはい、私はVue.directive( 'swiper'、{ bind:function(){..........)を使用してコンポーネントに直接ディレクティブを作成し、そのコンポーネントをコンポーネントにインポートしました。 – SoldierCorp

答えて

3

私は非常にあなたのコードを理解していないが、uはコンポーネント(* .vueファイル)にディレクティブを使用したい場合は、私がどのようにお見せすることができます

コンポーネントは/ snippet.vue

<template> 

    <div id="snippet"> 
     <code v-snippet> 
      {{snippet.code}} 
     </code> 
    </div> 

</template> 


<script> 

import snippet from '../directive/snippet'; 


export default { 
    directives: { 
     snippet: snippet 
    } 
} 

</script> 

ディレクティブ/ snippet.js詳細について

export default { 

    update: function (el) { 

     console.log('update'); 
    } 
} 

、あなたはhttp://vuejs.org/v2/guide/custom-directive.html(イントロ部分)を確認することができます。

関連する問題