vue.jsで配列の中身の更新が反映されなかった

JavaScript, vue.js, 開発vue.js, オブジェクト, リアクティブ, 更新, 配列

広告

vue.jsを使っていて、dataに定義しているプロパティが初期化時の値のまま、変更しても、レンダリング時に更新されていなかったので、必要なことをまとめようと思います。

プロパティが、リアクティブでなければならない

プロパティの内容を更新後即時に検知することができる状態のことをリアクティブと認識しております。

配列を扱うときのリアクティブであるための操作

直接配列に代入する形ではいけない？

以下のメソッドを使うことで、リアクティブな状態の配列を持つことができる
  • push() 
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()reverse()

tmpListがリアクティブでない

vueObj = new Vue({
        el: '#viewArea',
        data: {
            tmpList: [],
        },
        mounted: function() {
            this.getTmpList();

        },
        methods:{
            getTmpList: function() {
                axios
                .post('/api/tmp/get-tmp-list')
                .then((res) =>{
                    this.tmpList = res.data.tmpList;
                })
            },
上記のコードをリアクティブなコードに置き換えると
vueObj = new Vue({
        el: '#viewArea',
        data: {
            tmpList: [],
        },
        mounted: function() {
            this.getTmpList();

        },
        methods:{
            getTmpList: function() {
                axios
                .post('/api/tmp/get-tmp-list')
                .then((res) =>{
                    this.tmpList.splice(0,this.tmpList.length,...res.data.tmpList);
                })
            },

オブジェクトの場合

vm.$setを使う

this.$set(this.someObject, 'b', 2)このような書き方をすることで、オブジェクトのプロパティ内に、新しいプロパティを追加して、値を入れることができます。

最後に

vue.jsで、配列のプロパティの変更をする際に代入をしようとしていた場合は、リアクティブでないので、想定した動作にならないこともある。なので、リアクティブで変更検知が可能なメソッドを使うようにすると良いと思います。

広告

JavaScript, vue.js, 開発vue.js, オブジェクト, リアクティブ, 更新, 配列