Javascript vue.js - 未在实例上定义但在渲染期间引用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39938959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vue.js - not defined on the instance but referenced during render
提问by David J.
I am loading a template that references a client side js file with my code like so:
我正在加载一个模板，该模板使用我的代码引用客户端 js 文件，如下所示：
<!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.
我的浏览器显示以下 (details.js) 加载成功。
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?
在我看来，我应该在方法键中定义 makeOffer 。这与在实例上定义它不一样吗？为什么看不到 makeOffer？
回答by Mahmud Adam
You want to make sure makeOfferis 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 publickeyusing vm.publickey; instead, you should use this.offer.publickey.
您要确保makeOffer在方法选项内（它本身在数据选项之外）。现在您在数据选项中有方法选项。此外，您不能记录publickeyusing vm.publickey; 相反，您应该使用this.offer.publickey.
回答by Fran?ois Romain
Well, I'm not sure I understood what you wanted to do, but I binded things together…?
好吧，我不确定我是否理解你想做什么，但我把东西捆绑在一起了……？
Here is a working snippet:
这是一个工作片段：
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>回答by T.Todua
One of the possible reasons could be, the type or syntax error in the jsfile where the Vuemethods are declared. So, double check that too, like:
可能的原因之一可能是声明方法的js文件中的类型或语法错误Vue。所以，也要仔细检查一下，比如：
var app= new Vue({
....
methods: {
platform_click: function (event) {
Alert("hi"): // typo error or ; missing
}
}
...
});
