Eltern/Kind-Methoden in Vue JS

Ich versuche, eine Methode innerhalb einer Kind-VUE-Instanz aufzurufen, und ich kann nicht herausfinden, warum es nicht zu funktionieren scheint.Eltern/Kind-Methoden in Vue JS

Meine Vue ist wie folgt:

Eltern

var content = new Vue({ 
    el: '.content-container', 
});

Kind

var vm = new Vue({ 
    el: '#form', 
    parent: content, 
    data: { 
     postcode: null, 
    }, 
    methods: { 
     lookupAddress: function (event) { 
      event.preventDefault(); 
      // Lookup Address 
     }, 
    }, 
});

Allerdings halte ich den folgenden Fehler in Vue Dev-Tools bekommen: v-on:click="lookupAddress" expects a function value, got undefined

Irgendwelche Ideen, warum die Methode für die untergeordnete Instanz nicht abgerufen wird? Ich rufe die Methode innerhalb des childs-Elements auf.

bearbeiten Meine HTML-Markup ist wie folgt:

<body> 
    <div class="content-container"> 
     <form id="form"> 
      ... 
     </form> 
    </div> 
</body>

Quelle

2016-07-05 G. Hanson

Markup benötigt wird –

hinzugefügt HTML oben @YerkoPalma –

nur eine Vermutung, aber wahrscheinlich, weil es denkt, dass die Methode lookupAddress auf der übergeordneten vue sein sollte (und es ist nicht auf das Kind suchen). Ich bin mir nicht sicher, dass Sie geschachtelte Vue-Instanzen erstellen sollten, vielleicht sollten Sie stattdessen Komponenten für das Kind suchen? – temporalslide

Nach dem, was ich hier Ihr Problem zu sehen ist, dass Sie zwei Vue Instanzen zu schaffen. Es wird schwierig, Daten und Methoden zwischen Instanzen zu teilen. Es ist viel einfacher, eine einzelne Instanz zu erstellen und Komponenten für die Beinarbeit zu verwenden. Einige Lesung: http://vuejs.org/guide/components.html

Quelle

2016-07-06 08:07:10

Würden Sie dann die Komponente in der untergeordneten Instanz verwenden, oder entfernen Sie die untergeordnete Instanz? Beachten Sie, dass dies kein SPA ist. –

Sie würden die Komponente in der Vue-Instanz verwenden. Sie lassen Vue über das Eigenschaftsobjekt "components" in einer Vue-Instanz über die Komponente Bescheid wissen. Wie so: 'var vm = new Vue ({ el: '.content-Container', compontents: { componenteName: 'Komponentenname' } });' Die Dokumentation ist sehr umfangreich und ein großer Teil der Verwendung von Vue. Ich würde empfehlen, es im Detail durchzugehen –

Antwort

Verwandte Themen