[Vue.js]更新した配列を画面にも反映させたい

未分類

こんにちは、ななです。

普段はフロントエンドとして活動しております。

今回は、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秒おきに自動で更新ボタンを押してくれるので、
画面が1秒おきにほぼリアルタイムで更新してくれます。

追記

「リアルタイムで更新したい」についてですが、
わざわざクリックしなくても、以下のようにすればOKでした。
(0.5秒おきに更新する場合:)

setInterval(function() {
    app1.changeArray()
}, 500);

コメント

タイトルとURLをコピーしました