Vue.js Mounted-Funktion greift nicht auf Komponenteneigenschaften zu

Question

Ich bin nicht sehr neu in Vue.js, was wahrscheinlich der Grund ist, warum ich mich fühle, als wäre ich den ganzen Morgen verrückt geworden :). Beim Erstellen einer Komponente, die ich normalerweise häufig verwende, musste ich in diesem Fall Google Maps innerhalb der mounted-Funktion initialisieren. Dies scheint der richtige Ort dafür zu sein. In der Funktion mounted würde ich auf die id Eigenschaft eines verschachtelten Eingabefeldes zugreifen und einen Ereignis-Listener anhängen. Ziemlich einfach, oder?

Nun, ich dachte, dass, wenn ich versuche, die Komponente mehrmals auf meiner Seite zu verwenden, ich irgendwie auf die gleiche (scheinbar gemeinsame) this Variable innerhalb der mounted Funktion zugreifen.

Nicht sicher, warum genau das passiert und/oder wenn es eine Funktion ist, aber um es noch seltsamer zu machen, liefern die Requisiten korrekte Werte innerhalb der Vorlage. (Und in den Methoden als auch)

Komponentendefinition

<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> 

Mit meiner Komponente ...

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

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

Was ich am Ende des Tages erhalten die richtige ID-Werte in der Vorlage, aber in meiner Konsole werden genau das gleiche Objekt und die ID protokolliert, wie Sie unten sehen können. Beachten Sie, dass die Eigenschaft _uid für beide dasselbe ist.

Um die Sache noch schlimmer, machen nach dem this Variable in der mounted Funktion zu modifizieren, während der Kontrolle, ich beobachtete, dass die zweite Komponente hat diese Eigenschaft auch geändert. Sie teilen also im Wesentlichen das gleiche Objekt, was extrem seltsam ist.

Ich würde gerne wissen, ob jemand ähnliche Probleme hatte und wie man damit umgeht.

Answer 1

No self-closing tags for components.

Vue-Vorlagen müssen HTML-gültig sein. Es gibt keine "selbstschließenden Tags" in HTML5, es ist eine XHTML-Syntax, die jetzt veraltet ist und Sie sollten nie verwenden.

(Später beachten :)

FYI selbstschließenden Tags in 2.0 funktioniert, solange Sie nicht Vorlagen in-dom verwenden.

Möglicherweise haben Sie auch ein Problem mit camelCase vs. kebab-case. Das folgende Snippet verhält sich wie erwartet.

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>