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

質問編集履歴

1

ソースコードを修正しました。

2020/08/30 00:51

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -62,7 +62,7 @@
62
62
  detailSelect: '事務所用のもの',
63
63
  items: [
64
64
  { id: 0, name: '建物', types: [
65
- { use: '木造・合成樹脂造のもの', details: [
65
+ { tId: 0, use: '木造・合成樹脂造のもの', details: [
66
66
  {label: '事務所用のもの', life: 24 },
67
67
  {label: '店舗用・住宅用のもの', life: 22 },
68
68
  {label: '飲食店用のもの', life: 20 },
@@ -70,7 +70,7 @@
70
70
  {label: '公衆浴場用のもの', life: 12 },
71
71
  {label: '工場用・倉庫用のもの(一般用)', life: 15 },
72
72
  ]},
73
- { use: '木骨モルタル造のもの', details: [
73
+ { tId: 1, use: '木骨モルタル造のもの', details: [
74
74
  {label: '事務所用のもの', life: 22 },
75
75
  {label: '店舗用・住宅用のもの', life: 20 },
76
76
  {label: '飲食店用のもの', life: 19 },
@@ -80,12 +80,12 @@
80
80
  ]},
81
81
  ]},
82
82
  { id: 1, name: '建物附属設備', types: [
83
- { use: 'アーケード・日よけ設備', details: [
83
+ { tId: 0, use: 'アーケード・日よけ設備', details: [
84
84
  {label: '主として金属製のもの', life: 15 },
85
85
  {label: 'その他のもの', life: 8 },
86
86
  ]},
87
- { use: '店舗簡易装備', details: [
87
+ { tId: 1, use: '店舗簡易装備', details: [
88
- {label: '', life: 3 },
88
+ {label: 'aaa', life: 3 },
89
89
  ]},
90
90
  ]},
91
91
  ],
@@ -93,28 +93,39 @@
93
93
  },
94
94
  computed: {
95
95
  getTypes: function() {
96
- // 選択中の情報を取得
96
+ // 選択中の情報を取得
97
- let itemName = this.itemSelect;
97
+ let itemName = this.itemSelect; // 1つ目のselect
98
98
 
99
- // items から選択中のnameを探す
99
+ // items から選択中のnameを探す
100
- const itemResult = this.items.find((v) => v.name === itemName);
100
+ const itemResult = this.items.find((v) => v.name === itemName);
101
101
 
102
- // 配列出力する
102
+ // 2つ目のselectの初期値セットする
103
- this.typeSelect = this.items[itemResult.id].types[0].use;
103
+ this.typeSelect = this.items[itemResult.id].types[0].use;
104
+
105
+ // 2つ目のselectのoptionをセットする
104
- return this.items[itemResult.id].types;
106
+ return this.items[itemResult.id].types;
105
- },
107
+ },
106
- getDetails: function() {
108
+ getDetails: function() {
107
- // 選択中の情報を取得
109
+ // 選択中の情報を取得
110
+ let itemName = this.itemSelect; // 1つ目のselect
108
- let typeName = this.typeSelect;
111
+ let typeName = this.typeSelect; // 2つ目のselect
109
- console.log(typeName);
112
+
110
- // items から選択中のuseを探す
113
+ // items から選択中のuseを探す
114
+ const itemResult = this.items.find((v) => v.name === itemName);
111
- const typeResult = itemResult.types.find((v) => v.use === typeName);
115
+ const typeResult = this.items[itemResult.id].types.find((v) => v.use === typeName);
116
+
117
+ // 3つ目のselectの初期値をセットする
112
- console.log(typeResult);
118
+ console.log(this.items[itemResult.id].types[typeResult.tId].details[0].label);
119
+ this.detailSelect = this.items[itemResult.id].types[typeResult.tId].details[0].label;
120
+
113
- // ここで上手くいかない(undefinedにな
121
+ // 3つ目のselectのoptionをセットす
122
+ return this.items[itemResult.id].types[typeResult.tId].details;
123
+
114
- }
124
+ }
115
125
  },
116
126
  });
117
127
  ```
118
128
 
119
- 多次元配列2つ目の配列を取得することは可能なでしょうか
129
+ 3つ目selectの初期値、及び3つ目のselectoptionが、セットされません
130
+
120
131
  どうぞ、よろしくお願いいたします。