vueで取得したJSONデータがv-forに反映されない

Question

vueメソッド内で取得したJSONデータをtableタグ内にv-forで反映させたいのですが、表示に反映されません。
console.logには取得されたJSONデータは入っています。
仮にGetDataの初期値に値を設定すると正常にv-forに反映されます。

sample.vue

<template>
...
<th v-for="Value of GetData" >{{ Value }}</th>
...
</template>


<script>
export default {
	data() {
		return {
			GetData:[],
		}
	},
	mounted: function(){
		this.approachGetList()
	},
	methods: {
		async approachGetList () {
			var listData = “POSTデータ”
			var responseData = await axios.post(‘API’_URL, listData).catch((error) => {
				self.$message({
					type: 'error',
					message: ‘JSONの取得に失敗しました。'
				});
			});
			this.GetData = responseData.data
			console.log(GetData);
		},
	},
}
</script>

試したこと

読み込みのタイミングかと思い、mounted、createdとメソッドを呼び出してみましたが同様です。
console.logにはJSONデータが表示されます。
----- 追記 -----
dataのGetDataに直接JSON値を指定すると出力されます。

GetData:[{"id":1,"month":"02","colval":20},{"id":2,"month":"03","colval":19}]

approachGetList()内でGetDataに直接JSON値を指定すると出力されません。

this.GetData = [{"id":1,"month":"02","colval":20},{"id":2,"month":"03","colval":19}]

Comments

[rubytomato]

> v-for=“Value of GetData"

質問文のコードでは、最初のダブルクォーテーションが全角文字のようですが、実際のコードではどうなっていますか？

Answer 1

開発者ツールのコンソール上でエラーが出ていないか確認してみてください。
出ているようでしたら、エラーも追記していただけると助かります。

一旦 GetData の中身を直接書いて、描画されるか確認してみるのはいかがでしょうか？

これで表示されるようならaxiosで取ってきたデータがおかしいですし、表示されないようでしたらtemplate側に問題がある、と切り分けができます！

↓のような感じです

  mounted: function(){
    // this.approachGetList()
    this.GetData = [{"id":1,"value1":"02","value2":20}, 
                    {"id":2,"value1":"03","value2":19}]
  }

Comments

[退会済みユーザー]

ご回答ありがとうございます。
開発コンソールではエラーは発生していない状態です。
ご指摘の方法にて切り分けを行ってみましたが、出力されませんでした。
値はセットされておりますが、template側が更新されない状態と思われます。

[ymneet]

ありがとうございます！

原因解明できなかったので、一旦同じようなコードをcodepen で書いて見ました
https://codepen.io/ymaeda/pen/vYOdGjB

↑の状態では動くようです。
template の内容全て確認していないので、可能性の話ですが、th の上の階層にtableタグが無かったりしませんか？
もしよければ、templateの中身も追記してもらえると助かります。

[退会済みユーザー]

ありがとうございます。
アドバイスいただきましたtemplate側について調べてみました。
親となるphp内のvue定義箇所を全て削除することで正常に表示されるようになりました。
ありがとうございました。

Answer 2

呼ぶところは、mountedであっていると思います。
ちゃんとmountedのところでawaitするように変えてあげると動くと思います。

 mounted: function() {
    const getList = async () => {
      await this.approachGetList()
    }
    getList()
  },

または、callback関数にしてあげるのも一つの手だと思います

    mounted: function(){
        this.approachGetList(data =>{
            this.GetData = data
        })
    },
    methods: {
    
        approachGetList (callback) {
            var listData = “POSTデータ”
            axios.post(‘API’_URL, listData)
            .then(res =>{
            	callback(res)
            })
            .catch((error) => {
                self.$message({
                    type: 'error',
                    message: ‘JSONの取得に失敗しました。'
                });
            });
        },
    },

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご指摘いただきました方法にて試してみましたが、両方の方法とも出力はされませんでした。

sample JSONデータ
[{"id":1,"value1":"02","value2":20},{"id":2,"value1":"03","value2":19}]

Answer 3

自己解決です。
親となるPHP側のvueの定義の記載を全て削除すると正常に動作するようになりました

<script>
var app = new Vue({
		el: '#app',
...
...
...
});
</script>

Comments

[oec]

phpだったのですね。お役には立てませんでしたが。解決できて何よりです