Je charge un modèle qui référence un fichier js côté client avec mon code comme suit:
<!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>
Mon navigateur indique que le fichier suivant (details.js) est chargé avec succès.
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)}
}
}
})
Cependant, lorsque je soumets le formulaire, le message d'erreur suivant s'affiche:
[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.
Il me semble que je définis makeOffer dans la clé de méthode comme je le devrais. N'est-ce pas la même chose que de le définir sur l'instance? Pourquoi ne voit-il pas MakeOffer?
Vous voulez vous assurer que makeOffer
est à l'intérieur de l'option méthodes (ce qui est en dehors de l'option de données). À l'heure actuelle, vous avez l'option des méthodes à l'intérieur de l'option de données. De plus, vous ne pouvez pas vous connecter à la publickey
en utilisant vm.publickey
; à la place, vous devriez utiliser this.offer.publickey
.
Eh bien, je ne suis pas sûr d'avoir compris ce que tu voulais faire, mais j'ai lié les choses entre elles…
Voici un extrait de travail:
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>
Une des raisons possibles pourrait être, le type ou l'erreur de syntaxe dans le fichier js
où les méthodes Vue
sont déclarées. Alors, vérifiez bien cela aussi, comme:
var app= new Vue({
....
methods: {
platform_click: function (event) {
Alert("hi"): // typo error or ; missing
}
}
...
});