Vue.js掛載函數不能訪問組件屬性

我對Vue.js並不是很陌生，這可能就是爲什麼我覺得我一直在瘋狂地運行:)。在創建組件時，我經常這樣做，在這種情況下，我必須在mounted函數中初始化Google Maps，這似乎是正確的做法。在mounted函數中，我將訪問嵌套輸入字段的id屬性並將事件偵聽器附加到它。很簡單的權利？Vue.js掛載函數不能訪問組件屬性

嗯，我覺得當我試着在我的頁面上多次使用該組件時，我在某種程度上訪問了mounted函數中的相同（看似共享的）this變量。

不知道爲什麼發生這種情況和/或如果它是一個功能，但使它更怪，道具在模板中產生正確的值。（和方法以及內）

組件定義

<template> 
    <div class="LocationInput"> 
    <input 
     type="text" 
     :id="id" 
    /> 
    </div> 
</template> 

<script> 
export default { 
    name: 'LocationInput', 
    props: ['id'], 
    mounted() { 
    console.log('Component object representation ==> ', this) 
    console.log('ID ==> ', this.id) 
    } 
} 
</script>

使用我的組件...

<template> 
    <div class="MyTravelApp"> 
    <LocationInput id="id1"/> 
    <LocationInput id="id2"/> 
    </div> 
</template> 

<script> 
import LocationInput from './components/LocationInput'; 
export default { 
    components: { LocationInput } 
} 
</script>

我得到在一天結束的時候什麼是正確的模板中的id值，但在我的控制檯中，會記錄完全相同的對象和id，如下所示。注意_uid屬性對於兩者來說都是一樣的。

爲了使更差的問題，修改所述mounted功能的this變量之後，在檢查，我觀察到的是，第二組件具有屬性修改爲好。所以他們基本上共享同一個對象，這非常奇怪。

我想知道是否有人有類似的問題，以及如何處理它。

來源

2017-04-14 chidieberennadi

爲什麼通過在由ID = 「ID1」，而不是使用組成部件的支柱：ID = 「ID1」？ –

您有第一個模板關閉標記的模板打開標記。 –

@ M.Suurland這是因爲我把它作爲一個字符串傳遞。 – chidieberennadi

No self-closing tags for components。

Vue模板需要是有效的HTML。在HTML5中沒有「自閉標籤」，這是一種XHTML語法，現在已經過時，您應該從不使用它的。

（後來注意:)

FYI自閉標籤2.0，只要你不使用-DOM 模板工程。

您可能還有問題camelCase vs. kebab-case。下面的代碼片段按預期行事。

Vue.component('locationInput', { 
 
    template: '#location-input-template', 
 
    props: ['id'], 
 
    mounted() { 
 
    console.log('Component object representation ==> ', this._uid) 
 
    console.log('ID ==> ', this.id) 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#my-travel-app' 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<template id="location-input-template"> 
 
    <div class="LocationInput"> 
 
    <input type="text" :id="id"> 
 
    </div> 
 
</template> 
 

 
<div id="my-travel-app"> 
 
    <location-input id="id1"></location-input> 
 
    <location-input id="id2"></location-input> 
 
</div>

來源

2017-04-14 15:27:45

啊！讓我嘗試一下。 – chidieberennadi

不起作用。我也使用'.vue'文件，所以我不應該有理想的問題。 – chidieberennadi

查看更新的答案。 –

Vue.js掛載函數不能訪問組件屬性

回答

相關問題