こんにちは、ななです。
普段はフロントエンドとして活動しております。
今回は、Vue.jsの配列の更新方法、
また更新した配列を画面に反映させる方法についてご紹介します。
[Vue.js]配列を更新して画面にも反映させたい
配列を更新する方法
例えば、もともとVueに入っている配列「array1」を「array2」に更新したい場合を考えます。
まず、JavaScriptのVue部分を以下のようにすればOKです。
var array1 = [{name: 'なな', age: 23}, {name: 'あしゅ', age: 22}];
var array2 = [{name: 'さとし', age: 10}, {name: 'たけし', age: 18}];
var app1 = new Vue({
el: '#app-1',
data: {
users: array1
},
methods: {
changeArray() { // ここで配列を更新する↓
this.users.splice(0);
this.users = array2;
}
}
});次に配列を更新させるために、用意したメソッド「changeArray()」を発動させましょう。
例えば、html側で以下のような更新ボタンを用意します。
<div class="js-button" v-on:click="changeArray">更新</div>あとはこれをクリックするだけで、
Vueによって画面上に表示させた内容は更新されます。
リアルタイムで更新したい
さっきのやり方では、ボタンをクリックしないとVueの配列は更新されません。
ここでは、わざわざweb画面のボタンをクリックしなくても、
配列が更新されたらリアルタイムで自動でweb画面に反映させる方法を紹介します。
jQueryを使って、Javascriptを以下のように実装すればOKです。
var $jsButton = $('.js-button');
var users_auto_update = function() {
$jsButton.click();
setTimeout(users_auto_update, 1000);
}
users_auto_update();こうすることで、1秒おきに自動で更新ボタンを押してくれるので、
画面が１秒おきにほぼリアルタイムで更新してくれます。
追記
「リアルタイムで更新したい」についてですが、
わざわざクリックしなくても、以下のようにすればOKでした。
(0.5秒おきに更新する場合：)
setInterval(function() {
app1.changeArray()
}, 500);
コメント