Vue 2 Laravel 5.3 vue-toastr

Question

NOTE: Please refer to the comment on the suggested answer if you failed to find any flaw in your codes or no console log error appeared.

누구든지 vue-toastr에 대한 경험이 있으시면 다음을 참조하십시오. 나는 here의 지시를 따른다. JS는 다음 코드

import VueToast from 'vue-toast' 

이 뷰 구성 요소에 CSS를 가져올 첫 시간 후 (내 생각) 제대로 읽고있는 것 같다. 약간의 연구를하고 내가해야 언급 here (만약 내가 잘못 올바른) 등 VUE 스타일의 로더를 포함 VUE 로더가 생각 나는 VUE-toastr의 CSS를

import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css' 

를 가져 오려면 다음 코드를 사용 페이지를로드하고 버튼을 클릭해도 토스트 러가 표시되지 않으며 콘솔 로그 오류도 표시되지 않습니다. 나는 여기에 내 코드의 정식 버전을 첨부하고 도움을주십시오. 1

<template> 
    <div> 
    <button @click.prevent="toastIt">Click</button> 
    <vue-toast ref='toast'></vue-toast> 
    </div> 
</template> 

<script> 
    import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css' 
    import VueToast from 'vue-toast' 
    export default { 
    components:{ 
     'vue-toast': VueToast, 
    }, 
    data(){ 
     return{ 
     user:{}, 
     shop:{} 
     } 
    }, 
    props:[ 
    ], 
    created(){ 
    }, 
    mounted(){ 
    }, 
    updated(){ 
    }, 
    methods:{ 
     toastIt(){ 
     this.$refs.toast.showToast['hihi'] 
     } 
    }, 
    computed:{ 

    } 
    } 
</script> 

편집 라운드 브라켓 편집 후, 나는 그것을 시도하지만 여전히 아무것도 팝업 없습니다. 그러나 버튼을 클릭 할 때마다 콘솔 로그에 아무런 오류없이 물건을 가져 오는 것 같습니다. 도와주세요! 아래에서 이미지

EDIT # 2

. 그것은 vue-toast가 읽히고 있고, 실제로 toastr의 요소가 페이지에있는 것처럼 보인다. 그리고 버튼을 클릭 할 때마다 vue-toast의 div에 업데이트가 있지만 페이지에서 아무 것도 볼 수 없습니다.

Answer 1

당신은 구문 오류가 있습니다 this.$refs.toast.showToast['hihi']. 대괄호 대신 괄호 (this.$refs.toast.showToast('hihi'))를 사용하여 showToast 메서드를 호출하려고합니다.

전체 코드 : 당신의 응답 @aristidesfl에 대한

<template> 
    <div> 
    <button @click.prevent="toastIt">Click</button> 
    <vue-toast ref='toast'></vue-toast> 
    </div> 
</template> 

<script> 
    import '!!vue-style-loader!css-loader!vue-toast/dist/vue-toast.min.css' 
    import VueToast from 'vue-toast' 
    export default { 
    components:{ 
     'vue-toast': VueToast, 
    }, 
    data(){ 
     return{ 
     user:{}, 
     shop:{} 
     } 
    }, 
    props:[ 
    ], 
    created(){ 
    }, 
    mounted(){ 
    }, 
    updated(){ 
    }, 
    methods:{ 
     toastIt(){ 
     this.$refs.toast.showToast('hihi') 
     } 
    }, 
    computed:{ 

    } 
    } 
</script>