如何将 Vue 变量设置为等于函数参数?
How to set a Vue variable equal to a function argument?
我正在制作一个可以通过 node.js 服务器发送和接收 OSC 数据的网络应用程序。这一切都很好。但是我想在前面使用 Vue.js ,在这里我在声明函数时遇到了问题。当我只使用 JavaScript 时,它运行良好。
Javascript:
import osc from "osc";
var port = new osc.WebSocketPort({
url: "ws://localhost:8083" //localhost:8083 online server 178.62.209.37:8083
});
port.open();
var message = []
OSCMessage();
function OSCMessage() {
port.on("message", function(oscMessage) {
//console.log(oscMessage);
OSCMessages(oscMessage);
});
}
function OSCMessages(oscMessage) {
message = oscMessage;
console.log(message);
}
但是当我尝试将其放入 Vue 时,我在控制台中收到错误消息,即使我使用 this.OSCMessages
:
OSCMessages is not defined
Vue代码:
import osc from "osc";
var port = new osc.WebSocketPort({
url: "ws://localhost:8083" //localhost:8083 online server 178.62.209.37:8083
});
port.open();
export default {
data() {
return {
value: 60,
message: [],
}
},
computed: {
OSCMessage: function() {
port.on("message", function(oscMessage) {
//console.log(oscMessage); // this console log is working great.
this.OSCMessages(oscMessage)
});
},
OSCMessages: function(oscMessage) {
this.message = oscMessage
console.log(this.message.address);
},
},
}
我的目标是让Vue变量message
等于oscMessage
,这样我就可以在Vue中继续使用oscMessage
数据。我认为这与 Vue 中的范围界定有关。我希望有人能帮助我,在此先感谢!
有两个问题。
1) 如果你不使用 es6 箭头函数作为回调,那么 this
将不会引用 Vue 实例。
改变这个:
port.on("message", function (oscMessage) {
this.OSCMessages(oscMessage)
});
至:
port.on("message", (oscMessage) => {
this.OSCMessages(oscMessage)
});
2) 这些似乎都是方法,而不是计算。或者至少 OSCMessages
像方法一样被调用。您不能将参数传递给计算。
变化:
computed: {
至
methods: {