質問するログイン新規登録

回答編集履歴

1

追記を受けて問題点を指摘

2019/01/31 08:49

投稿

yhg
yhg

スコア2161

answer CHANGED
@@ -1,3 +1,48 @@
1
1
  親コンポーネントがトークンを取得する前にAPI呼んでるのでは・・・?
2
2
  `'Bearer '.concat(this.tokenData)`でダメなのから推測すると、`this.tokenData`が空の状態でAPI呼んでると思います。
3
- ChromeのデベロッパーツールのNetworkタブをXHRでフィルタリングして見てリクエストがどうなってるか見てみると良いですよ。
3
+ ChromeのデベロッパーツールのNetworkタブをXHRでフィルタリングして見てリクエストがどうなってるか見てみると良いですよ。
4
+
5
+ ## 追記
6
+ `export default {...}` の外側で`this.tokenNo`を参照してるので、未定義の変数を参照してエラーになってます。
7
+ 下記のような感じにすると良いと思います。
8
+
9
+ ```vue
10
+ <script>
11
+ import SideBar from './registration_components/SideBar';
12
+ import axios from 'axios';
13
+
14
+ const ApiUrl = 'http://localhost/*******/*******/public/api/items';
15
+
16
+ export default {
17
+ // 中略
18
+
19
+ computed: {
20
+ client() {
21
+ return axios.create({
22
+ baseURL: ApiUrl,
23
+ headers: {
24
+ 'Accept': 'application/json',
25
+ 'Authorization': `Bearer ${this.tokenData}`,
26
+ },
27
+ responseType: 'json'
28
+ });
29
+ }
30
+ },
31
+
32
+ methods: {
33
+ async update (data) {//ユーザー情報の更新
34
+ await this.client.put(`/${data.id}`, data)
35
+ .then(
36
+ alert('user edit ok')
37
+ )
38
+ .catch(function (err) {
39
+ alert(err)
40
+ });
41
+ this.refresh()
42
+ },
43
+ },
44
+
45
+ // 中略
46
+ }
47
+ </script>
48
+ ```