VueJS - 來自materializecss的觸發模式

我想從VueJS實例內的materializecss框架中觸發模態。VueJS - 來自materializecss的觸發模式

Both，VueJS and Materializecss，are implemented correct。他們自己的框架都能正常工作。

單擊錯誤打開按鈕結果：

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>

任何想法？謝謝！

來源

2017-03-03 Brotzka

你有沒有解決這個問題？ – d00dle

不幸的是不是.. – Brotzka

我可以補充說我解決了我的問題，但我使用了不同的CSS框架。在我的例子中，它是需要導入（針對特定模塊）並應用於jQuery變量的CSS框架的js模塊。我不知道你的情況是否一樣，但值得一試。 – d00dle

我似乎找到了一個解決方案：

很高興知道Laravel用戶：我目前的項目，我用Materializecss，VueJS和VueRouter使用Laravel 5.5，但我認爲解決方案是通用的。 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

現在你必須初始化模態功能上的包裝Vue的實例的安裝事件：

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實例中（參見上文）。 HTML的代碼見下文：

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

但你也可以做一個安裝功能或組件的任何其它函數中使用的模態：

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

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

這也適用，如果組件變成只有點擊鏈接後纔可見（使用VueRouter）。

希望這可以幫助除我以外的人:)

來源

2017-11-09 04:53:07 Brotzka

至於建議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; 
     }); 
},

來源

2017-03-03 07:57:56 Saurabh

現在該模式會在安裝的事件上彈出。但我希望模型在點擊時彈出。此錯誤更改爲：未捕獲的TypeError：data [option]不是HTMLDivElement處的函數。（adminarea.js：24525） at function.each（adminarea.js：10567） at jQuery.fn.init.each（adminarea.js：10356） at jQuery.fn.init.Plugin [as modal]（ adminarea.js：24519） at Vue $ 3.showLoader（adminarea.js：21396） at boundFn（adminarea.js：54852） at HTMLButtonElement.invoker（adminarea.js：56363）' – Brotzka

VueJS - 來自materializecss的觸發模式

回答

相關問題