Vue.js 在 websocket onmessage 事件中更新 html

Question

我是 Vue.js 新手。我正在尝试在 websocket 的 onmessage 事件中捕获数据并更新 HTML 组件（跨度或 div）。 console.log 或 alert 函数在 onmessage 中工作，但无法更新 span。

开头有一个模板部分，其中包含一个输入框（消息），一个按钮触发发送消息，以及一个与结果绑定的跨度。

<template>
  <div id="app">
    <h2>Vue.js WebSocket</h2> 
    <input v-model="message" placeholder="Type command here"/>
    <button v-on:click="sendMessage()">Send Message</button><br><br>
    <span v-text="result"></span>
  </div>
</template>

这里是脚本部分；

<script>
export default {
  name: 'App',
  
  data: function () {
    return {
      connection:null,
      message:"",
      result:null
    }
  },

  methods: {
    sendMessage: function() {
      console.log("Sent command:" + this.message);
      console.log(this.connection);
      this.connection.send(this.message);
    },
  },

  created: function() {
    console.log("Starting connection to WebSocket Server");
    this.connection = new WebSocket("ws://localhost:3000");
    
    //THAT WORKS
    this.result = "Result of command";

    this.connection.onmessage = function(event) {
      console.log(event);
    }
    this.connection.onopen = function(event) {
      console.log(event);
      console.log("Successfully connected to the echo websocket server...")
    }
    this.connection.onmessage = function(event) {
      //THAT WORKS
      console.log("Resultttt:" + event.data);
      
      //THAT DOESN'T WORK
      this.result = event.data;
    }
    this.connection.onopen = function(event) {
      console.log(event);
      console.log("Successfully connected to the echo websocket server...");
    }
  }
}
</script>

Answer 1

这可能是上下文问题。尝试如下更改，看看是否有效。

this.connection.onmessage = (event) => {
  // no new context ----------------^
  this.result = event.data;
}

或

const v = this;
this.connection.onmessage = function(event) {
  v.result = event.data;
}