回答編集履歴

1

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

2019/01/31 08:49

投稿

yhg
yhg

スコア2161

test CHANGED
@@ -3,3 +3,93 @@
3
3
  `'Bearer '.concat(this.tokenData)`でダメなのから推測すると、`this.tokenData`が空の状態でAPI呼んでると思います。
4
4
 
5
5
  ChromeのデベロッパーツールのNetworkタブをXHRでフィルタリングして見てリクエストがどうなってるか見てみると良いですよ。
6
+
7
+
8
+
9
+ ## 追記
10
+
11
+ `export default {...}` の外側で`this.tokenNo`を参照してるので、未定義の変数を参照してエラーになってます。
12
+
13
+ 下記のような感じにすると良いと思います。
14
+
15
+
16
+
17
+ ```vue
18
+
19
+ <script>
20
+
21
+ import SideBar from './registration_components/SideBar';
22
+
23
+ import axios from 'axios';
24
+
25
+
26
+
27
+ const ApiUrl = 'http://localhost/*******/*******/public/api/items';
28
+
29
+
30
+
31
+ export default {
32
+
33
+ // 中略
34
+
35
+
36
+
37
+ computed: {
38
+
39
+ client() {
40
+
41
+ return axios.create({
42
+
43
+ baseURL: ApiUrl,
44
+
45
+ headers: {
46
+
47
+ 'Accept': 'application/json',
48
+
49
+ 'Authorization': `Bearer ${this.tokenData}`,
50
+
51
+ },
52
+
53
+ responseType: 'json'
54
+
55
+ });
56
+
57
+ }
58
+
59
+ },
60
+
61
+
62
+
63
+ methods: {
64
+
65
+ async update (data) {//ユーザー情報の更新
66
+
67
+ await this.client.put(`/${data.id}`, data)
68
+
69
+ .then(
70
+
71
+ alert('user edit ok')
72
+
73
+ )
74
+
75
+ .catch(function (err) {
76
+
77
+ alert(err)
78
+
79
+ });
80
+
81
+ this.refresh()
82
+
83
+ },
84
+
85
+ },
86
+
87
+
88
+
89
+ // 中略
90
+
91
+ }
92
+
93
+ </script>
94
+
95
+ ```