Как установить переменную Vue равной аргументу функции? - PullRequest
Новая
       35

Как установить переменную Vue равной аргументу функции?

1 голос
/ 18 апреля 2020

Я создаю веб-приложение, которое может отправлять и получать данные OS C через сервер node.js. Это все работает нормально. Но я хочу использовать 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 не определено

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, чтобы я мог продолжать использовать данные oscMessage в Vue. Я думаю, что это как-то связано с областью видимости в Vue. Я надеюсь, что кто-то может мне помочь, заранее спасибо!

1 Ответ

0 голосов
/ 18 апреля 2020

Есть две проблемы.

1) Если вы не используете функцию стрелки es6 в качестве обратного вызова, this не будет ссылаться на экземпляр Vue.

Измените это: 

port.on("message", function (oscMessage) {    
   this.OSCMessages(oscMessage)
});

на: 

port.on("message", (oscMessage) => {    
   this.OSCMessages(oscMessage)
});

2) Оба эти метода являются методами, а не вычислениями. Или, по крайней мере, OSCMessages вызывается как метод. Вы не можете передавать аргументы для вычислений.

Изменение: 

computed: {

на 

methods: {
...