vue 脚本中的数据更改未反映在浏览器输出中

Question

我有一些示例 vue js 脚本，所以我认为我已经了解了基础知识。但是现在事情不起作用，这表明我不了解基础知识。有人能解释一下这里发生了什么吗？

<div id="breakingnews">
        <form class="pure-form pure-form-aligned" 
                id="purecss" v-on:submit.prevent="checkForm" 
                method="get">

              <fieldset>
                <div class="pure-control-group">
                    <label for="bnews">Breaking News</label>
                    <input id="bnews" type="text" v-model="bnews" placeholder="Headlines" required>
                </div>

                  <div class="pure-controls">
                      <button type="submit" class="pure-button pure-button-primary">Submit</button>
                  </div>
              </fieldset>

        </form>

        <h1>Breaking News</h1>  
        {{ display_bnews }}
        {{ message }}
    </div>

还有 vue

let stompClient = null;

var vm = new Vue({
 el: ‘#breakingnews’,
 data: function () {
    return {
      bnews: ‘’,
      display_bnews: ‘’,
      message: ‘Hello Johnny’
    }
 },
 mounted: function () {
   let socket = new SockJS(’/gs-guide-websocket’);
   stompClient = Stomp.over(socket);
   stompClient.connect({}, function (frame) {
   console.log('Connected: ’ + frame);

          stompClient.subscribe('/topic/bnews', function (val) {                    
            console.log("DEBUG: return val is " + val.body);                
            this.display_bnews = val.body;
            console.log("DEBUG: now display is " + this.display_bnews + " message is " + this.message);
            this.message = "Hello XXXXX";
            console.log("DEBUG: and now message is " + this.message);
          });
      });

 },
 methods:{
    checkForm: function (e) {
        console.log("DEBUG: checkForm " + this.bnews);
        stompClient.send("/app/bnews", {}, this.bnews);
    console.log("DEBUG: returned from stomp send");
        e.preventDefault();
    }
 }

})

所以当我运行时，会显示 {{ message }} - “Hello Johnny”。然后我发送一个标题，它给出了一个 console.log：

DEBUG: checkForm Here is a Headline

SEND
destination:/app/bnews
content-length:18

Here is a Headline
DEBUG: returned from stomp send

<<< MESSAGE
destination:/topic/bnews
content-type:text/plain;charset=UTF-8
subscription:sub-0
message-id:j5s40qfk-9
content-length:18

Here is a Headline
DEBUG: return val is Here is a Headline
DEBUG: now display is Here is a Headline message is Hello XXXXX
DEBUG: and now message is Hello XXXXX

但是 display_bnews 没有显示在 html 中，消息也没有更新。所以本质上，当数据变量发生变化时，html 中的数据变量都不会被更新。但我认为这就是 {{ }} 语法所做的。

我哪里错了？

问候， 约翰

Answer 1

您的单脚呼叫正在使用function，因此您会得到一个新的this。你要么在调用之前保存vue的组件this，要么使用fat arrow。

下面是一个使用fat arrow的例子：

stompClient.connect({}, (frame) => {
     console.log('Connected: ’ + frame);

     stompClient.subscribe('/topic/bnews', (val) => {                    
            console.log("DEBUG: return val is " + val.body);                
            this.display_bnews = val.body;
            console.log("DEBUG: now display is " + this.display_bnews + " message is " + this.message);
            this.message = "Hello XXXXX";
            console.log("DEBUG: and now message is " + this.message);
      });
})