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"。然后我发了一个标题，上面有一个控制台日志：

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

您的stomp调用正在使用function，因此您将获得一个新的this。您可以在调用之前保存vue的组件this，也可以使用fat arrow。

Bellow——一个使用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);
});
})