如何區分Vue Devtools中的組件實例

當我在Vue的devtools鉻擴展中查看我的應用程序狀態時，可以在樹視圖中看到同一組件的多個實例。但是，無法將一個實例與另一個實例區分開來。例如，在下面的截圖中有三個<Todo>組件。想象一下，有30個。我如何將某種實例名稱或ID附加到我的組件中？點擊30個組件找到我需要的組件似乎很愚蠢。如何區分Vue Devtools中的組件實例

來源

2016-12-02 Peter Recore

如果沒有辦法此刻這將是對GitHub庫https://github.com/vuejs/vue-devtools/issues也許他們會增加它打開一個問題有用在將來。 –

你喜歡這件作品嗎？組件'name'到'prop'的散列圖顯示在其旁邊？ 'Vue.config.devtoolsComponentIdentifierMap = {Todo：'id'}'然後像' || ||檢查員的'Todo {someObj：foo}>'？ –

我不知道這是否是一個好的解決方案，但是你可以在你的組件掛載方法中做到這一點$ options.name ='todo'+ this.todo.someProp' –

幾個月前我也有同樣的想法。

所以我試了一下。

我的PR已經提交：https://github.com/vuejs/vue-devtools/pull/331

這可能是一個有點早依靠我的解決方案，因爲核心團隊仍可能會拒絕PR或者請求其他命名約定。

在那之前，你可以從我的回購建立我自己的建議版本： https://github.com/nerdyglasses/vue-devtools/tree/verbose-component-tree

那是幫你？

最佳，基督教

來源

2017-05-12 08:49:23 Gambo

如何區分Vue Devtools中的組件實例

回答

相關問題