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

質問編集履歴

3

詳細を追加

2020/12/08 03:13

投稿

kazu0905
kazu0905

スコア1

title CHANGED
@@ -1,1 +1,1 @@
1
- Vue CLIでaxiosを使ってAPIから取得したJSONファイル内の特定要素を削除か表示させたい
1
+ Vue CLIでaxiosを使ってAPIから取得したJSONファイル内の特定要素表示、もしくは削除
body CHANGED
@@ -3,13 +3,14 @@
3
3
  <div id="app">
4
4
  <button v-on:click="call_api()">表示する</button>
5
5
  <div v-for="user in users" :key="user.id">
6
-     <span><b>リスト:{{ user.list1 }} </b></span>
6
+     <span><b>リスト:{{ user.list1 | moment }} </b></span>
7
7
      </div>
8
8
  </div>
9
9
  </template>
10
10
 
11
11
  <script>
12
12
  import axios from 'axios';
13
+ import moment from 'moment';
13
14
 
14
15
  export default {
15
16
 
@@ -28,7 +29,7 @@
28
29
  params:{
29
30
  ****: ****,
30
31
  ****: ****,
31
- date: this.timedata,
32
+ date: ****,
32
33
  }
33
34
  })
34
35
  .then(response => (this.users = response.data))
@@ -40,7 +41,12 @@
40
41
  })
41
42
 
42
43
  }
44
+ },
45
+ filters: {
46
+ moment: function (data) {
47
+ return moment.utc(data, 'hh:mm:ss a').local().format('LTS');
43
- }
48
+ }
49
+ }
44
50
  }
45
51
  </script>
46
52
  ```
@@ -51,7 +57,7 @@
51
57
  {
52
58
  "list1":"7:27:02 AM",
53
59
  "list2":"5:05:55 PM",
54
-     "list3":"9:38:53",
60
+      "list3":"9:38:53",
55
61
  "list4":"5:05:55 PM",
56
62
  },
57
63
  "status":"OK"
@@ -61,9 +67,9 @@
61
67
 
62
68
  ###実現したいこと
63
69
 
64
- {{ user.list1 }}
70
+ リスト:{{ user.list1 }}
65
71
 
66
- Vueインスタンスの要素を呼び出し時に、「"7:27:02 AM"」のみを表示させたい。
72
+ Vueインスタンスの要素を呼び出し時に、「リスト:"7:27:02 AM"」のみを表示させたい。
67
73
 
68
74
 
69
75
  ### 発生している問題・エラーメッセージ
@@ -73,9 +79,9 @@
73
79
 
74
80
  {{ user.list1 }}
75
81
 
76
- Vueインスタンスの要素を呼び出したのですが、JSONファイル内の「"status":"OK"」で表示されてしまいます。
82
+ Vueインスタンスの要素を呼び出したのですが、JSONファイル内の「"status":"OK"」が時刻として変換されて、アプリ上は「リスト:Invalid date」と表示されてしまいます。
77
83
 
78
- この「"status":"OK"」という特定要素を削除する方法がわかりません。もしくは表示しないようにする方法がわかりません。
84
+ この「"status":"OK"」、「リスト:Invalid date」という要素を削除する方法がわかりません。もしくは表示しないようにする方法がわかりません。
79
85
 
80
86
  ### 試したこと
81
87
 

2

タイトルの変更

2020/12/08 03:13

投稿

kazu0905
kazu0905

スコア1

title CHANGED
@@ -1,1 +1,1 @@
1
- Vue CLIでaxiosを使ってAPIから取得したJSONファイル内の特定要素を削除たい
1
+ Vue CLIでaxiosを使ってAPIから取得したJSONファイル内の特定要素を削除か表示させたい
body CHANGED
File without changes

1

実現したいことの追加

2020/12/07 09:19

投稿

kazu0905
kazu0905

スコア1

title CHANGED
File without changes
body CHANGED
@@ -58,6 +58,14 @@
58
58
  }
59
59
 
60
60
  ```
61
+
62
+ ###実現したいこと
63
+
64
+ {{ user.list1 }}
65
+
66
+ Vueインスタンスの要素を呼び出し時に、「"7:27:02 AM"」のみを表示させたい。
67
+
68
+
61
69
  ### 発生している問題・エラーメッセージ
62
70
 
63
71
 
@@ -67,7 +75,6 @@
67
75
 
68
76
  Vueインスタンスの要素を呼び出したのですが、JSONファイル内の「"status":"OK"」まで表示されてしまいます。
69
77
 
70
-
71
78
  この「"status":"OK"」という特定要素を削除する方法がわかりません。もしくは表示しないようにする方法がわかりません。
72
79
 
73
80
  ### 試したこと