Vue.js

[Vue.js] 表示が更新されない!!!

Vue.jsで配列の中身を表示したり、配列の中身を元にCSSのクラスを付けたり外したりするときに、表示が更新されなくて困ったりしたことありませんか?

 

 

 

 

詳細は以下の記事がすごくまとまっているので、たぶん、これを見るとわかると思います。

 

 

 

 

 

 

この記事は私の備忘録的に、自分でサンプルコードを用意して検証した結果を載せておきます。

 

 

 

 

とは言っても、大したものはなく、用意したのは以下のコードです。

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DisplayChange</title>
</head>
<body>
    <div id="app">
        <div v-for="a in arr">
            <p>{{ a }}</p>
        </div>
        <button v-on:click="changeArray1()">button1</button>
        <button v-on:click="changeArray2()">button2</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'aaa',
            arr: [0, 1,],
        },
        methods: {
            changeArray1() {
                arr[0]=1; //表示は変わりません。。
            },
            changeArray2() {
                this.$set(this.arr, 0, 1);//表示が変わります。
            },
        }
    })();
</script>
</html>

 

 

これは arr の中身を v-for で表示させています。

 

 

 

 

ボタンを押すと関数で配列の中身を書き換えるので、当然表示も更新されて欲しいのですが、なんと、、changeArray1() では表示が変わらないんですよね。。。

 

 

 

 

changeArray2()だと、表示が切り替わってくれます。

 

 

 

 

 

公式のマニュアルにも書いてありましたね。

 

 

 

 

changeArray1()の方法では、Vueが配列の変更を検出できないようです。

 

 

 

 

解決策はいくつかあるようですが、私は今回は $set を使ってみました。

 

 

 

 

ご参考になれば嬉しいです。

 

 

 

 

Code Penでやってみたソースを貼り付けてみました。

 

 

See the Pen display change with array by Kawamoto Kenta (@ri003074) on CodePen.

 

 

 

 

button1をクリックしても、表示は切り替わりませんが、button2をクリックすると切り替わってくれます。

 

 

 

 

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です