Vue で data コンポーネント内で参照している data 内の変数を更新を反映させたい

ファイルをアップロードする際に、APIサーバーを通してcsrf tokenを取得して、ファイルをアップロードしたいため
下記コードを試しましたが、data コンポーネント内のcsrf_tokenがcreated時に上書きされたものではなく、デフォルトの''が使われています。

Javascript
1data () {
2    return {
3      csrf_token: '',
4      dropzoneOptions: {
5        url: 'http://localhost:3000/upload',
6        headers: { 'csrf_token': this.csrf_token }
7      }
8    }
9  },
10  created: function () {
11    this.$axios.get(this.baseURL + '/csrf_token').then(response => {
12      this.csrf_token = response.data.csrf_token
13    })
14  }

6行目のthis.csrf_tokenを変数ではなく特定の文字列にしたところ、きちんと API サーバー側にも届いてることを確認できました。
このような場合、どうしたらいいのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptのthisをあいまいに理解しているようです。

data () {
  return {
    csrf_token: '',
    dropzoneOptions: {
      url: 'http://localhost:3000/upload',
      headers: { 'csrf_token': this.csrf_token } // (1)
    }
  }
}

(1)の時点でthisはいわゆる「コンポーネント自身」ではないです。

データを、他のデータに依存して変更（設定）したい場合は、created()の中で行います。
（this.$set()を利用しているのは、入れ子になったオブジェクトのプロパティを変更するためで、「データを、他のデータに依存して変更」するという本筋とは関係ありません。）

data () {
  return {
    csrf_token: '',
    dropzoneOptions: {
      url: 'http://localhost:3000/upload',
      headers: { 'csrf_token': this.csrf_token } // (1)
    }
  }
},
created() {
  this.$set(this.dropzoneOptions.headers, 'csrf_token', this.csrf_token)
}

質問にのっているコードが部分的なので、正解を全部はかけませんので、
不明点があれば、コメントでお知らせください。

補足

投稿2019/01/03 13:59