Vue.jsでjsonファイルを読み込んで表示する方法を教えてください

Question

前提・実現したいこと

Vue.jsでjsonファイルを読み込み、内容を画面に表示したいのですが、下記方法では表示されません。（console.logでは表示されます。）

どなたか解決方法を教えてください。

該当のソースコード

<template>
<!-- ↓にjsonファイルの内容を表示したい -->
  {{json}}
    <div>
      <label for="data_upload">ファイル(JSON)を選択</label>
      <input type="file" id="data_upload" name="data_upload" @change="onFileChange">
    </div>
</template>

<script>

export default{
  name:'UpLoad',
  props:{

  },
  data(){
    return{
      json:null

    }
  },
  methods:{
      onFileChange:function(e){
        var file = e.target.files[0]
        console.log(file);
        if(file){
          var reader = new FileReader()
          reader.onload = function(e){
            this.json = JSON.parse(e.target.result);
            console.log(this.json) //ここではコンソールに内容が表示される
          }
          reader.readAsText(file)
        }
      },

  }
}
</script>

Comments

[m.ts10806]

読み込めているのならあとは変数・文字列の範疇になるのでは？

[omikik]

jsonという変数名を他のものに変えてみましたが、表示されずでした。。
他に確認する方法はありますでしょうか。

Answer 1

こんばんは。

vue はあまり詳しくないので間違っていたら申し訳ないのですが、thisを束縛しないようにアロー式を使ってはいかがでしょうか。

//          reader.onload = function(e){

          reader.onload = e=>{

Comments

[omikik]

ありがとうございます！表示されました！