vue.js - nicht auf der Instanz definiert, sondern verwies während machen

ich eine Vorlage bin Laden, der wie so eine Client-Seite js Datei mit meinem Code verweist:vue.js - nicht auf der Instanz definiert, sondern verwies während machen

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script> 
    <link rel="stylesheet" type="text/css" href="../css/app.css"> 

</head> 
<body> 
<div id="container"> 
    <div id="map"> 
    <script src="../js/app.js" type="text/javascript"></script>  
    <div id="offer-details"> 
    <form id="offer-form" v-on:submit="makeOffer(tags, description, code)"> 
     <input id="description"/> 
     <input id="tags"/> 
     <input id="code"/> 
     <input type="submit"/> 
    </form> 
    </div> 
    </div> 
</div> 

</body> 

</html>

Mein Browser zeigt, dass die folgenden (Details. js) lädt erfolgreich.

var vm = new Vue({ 
    el: "#details", 
    data: { 
    offer: { 
      publickey: '', 
      privatekey: '',   
      name: '', 
      service: '', 
      value: '', 
      currency: '', 
      tags: '', 
      description: '', 
      code: '' 
    },    
    methods: { 
     makeOffer: function makeOffer(){console.log(vm.publickey)} 

    } 
    } 
})

Allerdings, wenn ich die Form erhalte ich die folgende Fehlermeldung einreichen:

[Vue warn]: Property or method "makeOffer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)vue.js:2574:7 

[Vue warn]: Handler for event "submit" is undefined.

Es scheint mir, wie ich makeOffer in der Methode Schlüssel, wie ich sollte mich definieren. Ist das nicht gleichbedeutend mit der Definition auf der Instanz? Warum sieht es nicht makeOffer?

Quelle

2016-10-09 David J.

Wie sieht Ihre Projektstruktur aus? –

Ich habe diesen Fehler, weil ich '' Tag in meiner Komponentendatei –

Sie wollen Stellen Sie sicher, dass sich makeOffer innerhalb der Methodenoption befindet (die sich selbst außerhalb der Datenoption befindet). Im Moment haben Sie die Option Methoden in der Datenoption. Außerdem können Sie die publickey unter Verwendung vm.publickey nicht protokollieren; Stattdessen sollten Sie this.offer.publickey verwenden.

Quelle

2016-10-09 05:07:30

Danke, dass Sie das bemerkt haben, das scheint das Problem zu sein, weil es keinen Fehler mehr gibt. Die Funktion "makeOffer" scheint jedoch immer noch nicht zu funktionieren, da in der Konsole nichts protokolliert wird. –

Nun, ich bin nicht sicher, ob ich verstanden, was Sie tun wollte, aber ich binded zusammen Dinge ...

Hier ist ein Arbeits Schnipsel:

var vm = new Vue({ 
 
el: "#details", 
 
data: { 
 
    offer: { 
 
     publickey: '', 
 
     privatekey: '',   
 
     name: '', 
 
     service: '', 
 
     value: '', 
 
     currency: '', 
 
     tags: '', 
 
     description: '', 
 
     code: '' 
 
    } 
 
},    
 
methods: { 
 
    makeOffer() { 
 
    console.log(this.offer) 
 
    } 
 
} 
 
    });

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="container"> 
 
    <div id="map"> 
 
<div id="details"> 
 
    <form id="offer-form" v-on:submit="makeOffer"> 
 
    <input v-model="offer.description" /> 
 
    <input v-model="offer.tags" /> 
 
    <input v-model="offer.code"/> 
 
    <input type="submit"/> 
 
    </form> 
 
</div> 
 
    </div> 
 
</div>

Quelle

2016-10-09 02:23:36

nicht geschlossen habe Ich versuche, die Methode makeOffer aufzurufen, wenn das Formular übermittelt. Das lässt mich das wegen der erwähnten Fehlermeldungen immer noch nicht machen. –

das Code-Snippet oben ruft die makeoffer-Funktion beim Senden auf und hat keine Fehler –

Danke, ich habe die Tatsache übersehen, dass Sie Methoden außerhalb der Daten definiert hatten, das war das Problem. –

vue.js - nicht auf der Instanz definiert, sondern verwies während machen

Antwort

Verwandte Themen