VueJS - materializeからのモーダル

Question

私はVueJSインスタンス内のmaterializecssフレームワークからモーダルをトリガーしようとしています。

VueJSとMaterializecssの両方が正しく実装されています。両方のフレームワークで、うまく動作します。エラーでオープンボタンの結果をクリックする

：

Uncaught TypeError: data[option] is not a function at HTMLDivElement. (adminarea.js:24562) at Function.each (adminarea.js:10567) at jQuery.fn.init.each (adminarea.js:10356) at jQuery.fn.init.Plugin [as modal] (adminarea.js:24556) at Vue$3.showLoader (adminarea.js:21396) at boundFn (adminarea.js:54956) at HTMLButtonElement.invoker (adminarea.js:56467)

これは私のVueのインスタンスである：

const app = new Vue({ 
    el: '#app', 
    data: { 
     activeUser: { 
      username: '', 
      email: '' 
     }, 
    }, 
    methods: { 
     showLoader(){ 
      $('#loaderModal').modal('open'); 
     }, 
     closeLoader(){ 
      $('#loaderModal').modal('close'); 
     } 
    }, 
    mounted() { 
     // Get current User 
     axios.get('/api/currentUser') 
      .then(response => { 
       this.activeUser.username = response.data.username; 
       this.activeUser.email = response.data.email; 
      }); 
    }, 
    components: { 
     Admindashboard 
    } 
}); 

そしてここでは、モーダル構造を持つ私のhtmlファイルの一部です：

<!-- Modal Structure --> 
      <div id="loaderModal" class="modal"> 
       <div class="modal-content"> 
        <h4>Fetching data..</h4> 
        <div class="progress"> 
         <div class="indeterminate"></div> 
        </div> 
       </div> 
      </div> 
      <button class="btn cyan waves-effect waves-cyan" v-on:click="showLoader">Open</button> 

ありがとう！

Answer 1

私が解決策を見つけたようだ：

ニースLaravel - ユーザーのために知っている：私の現在のプロジェクトのためにI Laravel 5.5をMaterializecss、VueJS、VueRouterで使用してください。しかし、その解決策は普遍的だと思います。 Materializecssはnpm経由でインストールされており、アプリケーションに組み込む必要があります。私は、内のCSSフレームワークを必要としました、私のressources/assets/js/bootstrap.js：

...// more code 
try { 
    window.$ = window.jQuery = require('jquery'); 
    window.materialize = require('materialize-css'); 
} catch (e) { 
    console.log(e); 
} 
...// more code 

今、あなたはあなたのラップヴュー・インスタンスのマウント・イベントでモーダル機能を初期化する必要があります。上記の

const app = new Vue({ 
    router, 
    data: { 
     ... 
    }, 
    methods: { 
     testClick: function(){ 
      console.log('Testklick-Call'); 
      $('#modal1').modal('open'); 
     } 
    }, 
    mounted: function(){ 
     console.log('Instance mounted'); 
     $('.modal').modal(); 
    } 
}).$mount('#app'); 

コード今、あなたはあなたが欲しい、これまでどこからプログラムモーダルごとに呼び出すことができます

など私の ressources/assets/js/app.js内に配置されており、 Laravel Mixにより、デフォルトで梱包されているが、私はLaravelミックス/ WebPACKをせずに、これは普遍的でも使用可能だと思います。メインイベントでクリックイベントでテストしました。関数は私のVueインスタンスに置かれます（上記参照）。

<button v-on:click="testClick">Open Modal</button> 

しかし、あなたはまた、マウント機能または任意のコンポーネントの任意の他の関数内でのモーダルを利用することができます：HTML-コード下記参照コンポーネントがなった場合、

<template> 
    <div> 
     <p>I am an component!</p> 
    </div> 
</template> 

<script> 
    export default { 
     mounted() { 
      console.log('Component mounted!'); 
      $('#modal1').modal('open'); 
     } 
    } 
</script> 

これも動作します（VueRouterを使用して）リンクをクリックした後にのみ表示されます。

これが私以外の誰かを助けてくれることを願っています。

Answer 2

としては、あなたがマウントブロックに次のコードを追加する必要があり、hereを提案：

mounted() { 
    $('#loaderModal').modal(); //New line to be added 
    // Get current User 
    axios.get('/api/currentUser') 
     .then(response => { 
      this.activeUser.username = response.data.username; 
      this.activeUser.email = response.data.email; 
     }); 
},