var MainTable = Vue.extend({
template: "<ul>" +
"<li v-for='(set,index) in settings'>" +
"{{index}}) " +
"{{set.title}}" +
"<button @click='changeSetting(index)'> Info </button>" +
"</li>" +
"</ul>",
data: function() {
return data;
}
});
Vue.component("main-table", MainTable);
data.settingsSelected = {};
var app = new Vue({
el: "#settings",
data: data,
methods: {
changeSetting: function(index) {
data.settingsSelected = data.settings[index];
}
}
});
Mit dem obigen Code tritt der folgende Fehler auf, wenn auf die Schaltfläche geklickt wird.
[Vue warn]: Die Eigenschaft oder Methode "changeSetting" ist nicht für die Instanz definiert, sondern wird beim Rendern referenziert. Stellen Sie sicher, dass in der Datenoption reaktive Dateneigenschaften deklariert sind. (gefunden in
<MainTable>
)
javascript
vue.js
vuejs2
vue-component
Lorenzo D'Isidoro
quelle
quelle
changeSetting
zurMainTable
Komponente hinzufügen .Antworten:
Problem
Der Fehler tritt auf, weil hier
changeSetting
in derMainTable
Komponente auf die Methode verwiesen wird :Die
changeSetting
Methode ist jedoch nicht in derMainTable
Komponente definiert . Es wird hier in der Root-Komponente definiert:Zu beachten ist, dass Eigenschaften und Methoden nur in dem Bereich referenziert werden können, in dem sie definiert sind.
Weitere Informationen zum Kompilierungsbereich von Komponenten finden Sie in der Dokumentation von Vue .
Was kann ich tun?
Bisher wurde viel darüber gesprochen, Dinge im richtigen Bereich zu definieren, sodass die Korrektur nur darin besteht, die
changeSetting
Definition in dieMainTable
Komponente zu verschieben.Es scheint so einfach, aber hier ist, was ich empfehle.
Sie möchten wahrscheinlich, dass Ihre
MainTable
Komponente eine dumme / präsentative Komponente ist. ( Hier ist etwas zu lesen, wenn Sie nicht wissen, was es ist, aber ein tl; dr ist, dass die Komponente nur für das Rendern von etwas verantwortlich ist - keine Logik). Das Smart / Container-Element ist für die Logik verantwortlich. In dem in Ihrer Frage angegebenen Beispiel wäre die Stammkomponente die Smart / Container-Komponente. Mit dieser Architektur können Sie die Eltern-Kind-Kommunikationsmethoden von Vue verwenden, damit die Komponenten interagieren. Sie geben die DatenMainTable
über Requisiten weiter und senden BenutzeraktionenMainTable
über Ereignisse an das übergeordnete Element . Es könnte ungefähr so aussehen:Das oben Genannte sollte ausreichen, um Ihnen eine gute Vorstellung davon zu geben, was zu tun ist, und um die Lösung Ihres Problems zu starten.
quelle
Sollte jemand mit dem gleichen dummen Problem landen, das ich hatte, stellen Sie sicher, dass Ihre Komponente die Eigenschaft ' data ' richtig geschrieben hat. (zB Daten und nicht Datum )
quelle
In meinem Fall war der Grund, dass ich nur das Schließen vergessen habe
Etikett.
Dies verursachte jedoch die gleiche Fehlermeldung.
quelle
Es ist wahrscheinlich durch Rechtschreibfehler verursacht
Ich habe einen Tippfehler beim Schließen des Skripts erhalten
quelle
Wenn jemand wie ich Probleme hat, beachten Sie, dass bei Methoden zwischen Groß- und Kleinschreibung unterschieden wird:
"Methoden" sollten "Methoden" sein
quelle
Es handelt sich höchstwahrscheinlich um einen Rechtschreibfehler bei reservierten vuejs-Variablen. Ich bin hierher gekommen, weil ich falsch geschrieben habe
computed:
und vuejs meine berechneten Eigenschaftsvariablen nicht erkennen würde. Wenn Sie also einen solchen Fehler haben, überprüfen Sie zuerst Ihre Rechtschreibung!quelle
Wenn Sie eine zweimalige vue-Instanz verwenden. Dann wird es Ihnen diesen Fehler geben. Zum Beispiel in app.js und Ihrem eigenen Skript-Tag in der Ansichtsdatei. Einfach einmal verwenden
quelle
Ich hatte zwei
methods:
in der<script>
, um zu zeigen, dass man stundenlang nach etwas suchen kann, das so ein einfacher Fehler war.quelle
Ich habe diesen Fehler erhalten, als ich versucht habe, einer Statuseigenschaft während der Instanziierung eine Komponenteneigenschaft zuzuweisen
quelle
Mein Problem war, dass ich die Methoden in meinem Datenobjekt platzierte. Formatieren Sie es einfach so und es wird gut funktionieren.
quelle
In meinem Fall war es eine Eigenschaft, die mir den Fehler und die korrekte Schreibweise gab und mir trotzdem den Fehler in der Konsole gab. Ich habe so viel gesucht und nichts hat für mich funktioniert, bis ich ihm Strg + F5 und Voilá gegeben habe! Fehler wurde entfernt. : 'v
quelle