Menu
I am loading a template that references a client side js file with my code like so:
<!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>
My browser shows that the following (details.js) loads successfully.
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)}
}
}
})
However, when I submit the form I get the following error message:
[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.
It looks to me like I'm defining makeOffer in the method key as I should. Is this not the same as defining it on the instance? Why isn't it seeing makeOffer?
327
You want to make sure makeOffer is inside the methods option (which itself is outside the data option). Right now you have the methods option inside the data option. Also, you can't log the publickey using vm.publickey; instead, you should use this.offer.publickey.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
