如何在Vue中的每個路由上重新初始化軟件包？

我找到了tool for table management，我喜歡它。唯一的問題是它需要初始化，如下所示，這意味着它只被調用一次 - 當頁面被加載。如何在Vue中的每個路由上重新初始化軟件包？

mounted:() => { 
    $(document).ready(function() { 
    $("table").DataTable(); 
    } 
}

我已經把在代碼安裝部分，我還試圖用創建。出於某種原因（可能是渲染順序），我必須將它保存在準備好的方法 - 否則它不會出現。

這給我帶來了兩個問題。首先，我將多個組件中的相同組件作爲矩陣視圖重用（它基於商店動態設置）。其次，當我從頁面導航然後返回時，它不會重新初始化。

我應該如何讓內部的代碼準備好方法每次組件進入視圖時都會運行？

我已經google了一下，但這不是一個很常見的問題，我彈出了彈藥。我得到的最好成績是the life cycle of the component，在那裏我什麼都看不到破土而出。我還發現data table instance needs to be destroyed但這隻有在我調用那些似乎不會發生的東西時纔有用。

來源

2016-12-26 Konrad Viltersten

我相信你只需要做如下：

mounted() { 
    $("table").DataTable(); 
}

爲$(document).ready檢測到文件已準備就緒，但在VUE情況下，mounted是哪裏EL被替換的實例剛剛被安裝之後調用新創建的vm。$ el，它應該等同於document.ready。

我也檢查vue 2.x.x掛載得到調用，如果你從頁面導航，然後回去。

如果該代碼是依賴被加載的數據和元件的重新呈現時，則可以使用updated代替安裝在數據變化會導致虛擬DOM之後被調用以重新呈現和修補。

updated() { 
    $("table").DataTable(); 
}

來源

2016-12-27 06:17:12 Saurabh

是的，我也這麼認爲。但這裏有一個奇怪的部分 - 它不適用於你所建議的代碼。但是，如果我們延遲一小段時間，那麼它確實如此。所以這很好：* setTimeout（（）=> {$（「table」）.DataTable（）;}，100）; *但是如果我們把100設爲0，它不會呈現。這就像是有一個小小的延遲（是在Vue或DataTable或兩者），我需要等待。我在創建基於一堆超時的體系結構方面遇到了很多問題，嘿嘿。這是一個災難的祕訣，也是一個壞設計的明顯標誌。我應該在哪裏掛鉤數據表創建**過去**安裝？ –

@KonradViltersten正如你所說的延遲後工作，這是依賴於數據加載？如果這比您可以嘗試[更新]（https://vuejs.org/v2/api/#updated）鉤子在數據更改後調用導致虛擬DOM被重新渲染和修補。 – Saurabh

它似乎在伎倆。請將其添加到答案中，以便我可以接受並+1。 Vue頁面上的生命週期圖非常具有誤導性 - 一些鉤子被描繪成圓形，一些被描繪成盒子（邊框的棕色顏色相同，但我沒有看到，因爲盒子的背景是白色的）。所以我認爲唯一可用的鉤子是*掛載*和*銷燬*。 –

如何在Vue中的每個路由上重新初始化軟件包？

回答

相關問題