Динамическое обновление data в vue.js

282

24 апреля 2017, 04:12

Есть плата Arduino с датчиком температуры, которая через IoT PubNub при изменении температуры отправляет данные . Скрипт записывает данные с датчика температуры в local storage, а потом отображает их через Vue Js.

Скажите пожалуйста, можно ли сделать так, что бы динамически отображались актуальные данные которые приходят с датчика каждую секунду. А не те, что были в local storage на момент загрузки страницы. Я только учусь, прошу не минусовать.

var pubnub = new PubNub({ 
    subscribeKey: "", 
    publishKey: "" 
}); 
var channel = "weather-channel"; 
 
pubnub.addListener({ //Listener for current temperature from arduino 
    message: function(m) { 
        localStorage.setItem("temperature data", JSON.stringify(m.message.temperature)); 
    } 
}); 
 
console.log("subscribing..."); //Subscribing for channel 
pubnub.subscribe({ 
    channels: [channel], 
}); 
 
var app = new Vue({ 
    el: "#app", 
    data: { 
        temperature: localStorage.getItem("temperature data") 
    }, 
 
});

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <script src="https://unpkg.com/vue" charset="utf-8"></script> <!--Vue CDN --> 
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.8.0.js"></script> <!--PubNub CDN --> 
    <title>control</title> 
</head> 
<body> 
<div id="app"> 
<span>{{temperature}}</span> 
</div> 
</body> 
    <script src="vue.js" charset="utf-8"></script> <!-- Client app js --> 
</html>

Answer 1

Просто обновлять свойство.
MVVM сам подхватит изменения и отобразит их.

...
pubnub.addListener({ //Listener for current temperature from arduino
  message: function(m) {
    app.temperature = JSON.stringify(m.message.temperature));
....