teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Vue.jsのセレクトタグの選択肢をajaxで取得した配列の中身で表示したいです。

編集履歴

質問編集履歴

5

'failure', 削除

2021/01/10 08:57

投稿

amaturePy
amaturePy

スコア131

test CHANGED
File without changes
test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
  }).catch(function (error) {
60
60
 
61
- console.log('failure', error)
61
+ console.log(error)
62
62
 
63
63
  })
64
64
 

4

'failure', error追加

2021/01/10 08:57

投稿

amaturePy
amaturePy

スコア131

test CHANGED
File without changes
test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
  }).catch(function (error) {
60
60
 
61
- console.log('failure')
61
+ console.log('failure', error)
62
62
 
63
63
  })
64
64
 

3

main.jsとhtmlを大幅に変更

2021/01/10 08:54

投稿

amaturePy
amaturePy

スコア131

test CHANGED
File without changes
test CHANGED
@@ -18,9 +18,9 @@
18
18
 
19
19
  <div id="app2">
20
20
 
21
- <select v-on:change="selected">
21
+ <select v-model="table_list_selected">
22
22
 
23
- <option v-for="item in table_list" :value="item">{{ item }}</option>
23
+ <option v-for="item in table_list">{{ item }}</option>
24
24
 
25
25
  </select>
26
26
 
@@ -42,15 +42,25 @@
42
42
 
43
43
  el: '#app2',
44
44
 
45
- data: {
45
+ data: () => ({
46
46
 
47
- table_list: [],
47
+ table_list: '',
48
48
 
49
- },
49
+ table_list_selected: ''
50
50
 
51
- async created () {
51
+ }),
52
52
 
53
+ created: function () {
54
+
55
+ axios.get('API').then(response => {
56
+
57
+ this.table_list = response.data
58
+
59
+ }).catch(function (error) {
60
+
53
- this.table_list = (await axios.get('APIのURL'))
61
+ console.log('failure')
62
+
63
+ })
54
64
 
55
65
  }
56
66
 

2

質問文を修正

2021/01/10 08:40

投稿

amaturePy
amaturePy

スコア131

test CHANGED
File without changes
test CHANGED
@@ -16,17 +16,15 @@
16
16
 
17
17
 
18
18
 
19
- <div id="app2">
19
+ <div id="app2">
20
20
 
21
- <select v-model="selected_table" v-on:change="selected">
21
+ <select v-on:change="selected">
22
22
 
23
23
  <option v-for="item in table_list" :value="item">{{ item }}</option>
24
24
 
25
25
  </select>
26
26
 
27
- <div>{{ selected_table }}</div>
28
-
29
- </div>
27
+ </div>
30
28
 
31
29
 
32
30
 
@@ -54,8 +52,6 @@
54
52
 
55
53
  this.table_list = (await axios.get('APIのURL'))
56
54
 
57
- this.selected_table = this.table_list
58
-
59
55
  }
60
56
 
61
57
  })

1

this.table_list[0].idをthis.table_listに変更

2021/01/09 11:07

投稿

amaturePy
amaturePy

スコア131

test CHANGED
File without changes
test CHANGED
@@ -18,13 +18,13 @@
18
18
 
19
19
  <div id="app2">
20
20
 
21
- <select v-model="selected_table_id" v-on:change="selected">
21
+ <select v-model="selected_table" v-on:change="selected">
22
22
 
23
- <option v-for="item in table_list" :value="item">{{ item.name }}</option>
23
+ <option v-for="item in table_list" :value="item">{{ item }}</option>
24
24
 
25
25
  </select>
26
26
 
27
- <div>{{ selected_table_id }}</div>
27
+ <div>{{ selected_table }}</div>
28
28
 
29
29
  </div>
30
30
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  this.table_list = (await axios.get('APIのURL'))
56
56
 
57
- this.selected_table_id = this.table_list[0].id
57
+ this.selected_table = this.table_list
58
58
 
59
59
  }
60
60