vue.js初心者です。
以下の点、ご教授いただきたいです。
実現したいこと
①選択した要素のvalueを取得したい
②取得したvalueを「確定ボタン」を押したあとに、#result内に文字列として反映させたい。
③東北、関西など複数になった場合のことも考慮したい(確定ボタンを押した後は、<ul>の選択はクリアする?など
サンプルコード
vue
1 <ul> 2 <li @click="onSelectR('kanto')">関東</li> 3 <ul v-show="selectR === 'kanto'"> 4 <li @click="onSelectC('tokyo')">東京</li> 5 <div v-show="selectC === 'tokyo'"> 6 <input type="checkbox">複数選択 7 <input type="checkbox">複数選択 8 <input type="checkbox">複数選択 9 </div> 10 <li @click="onSelectC('kanagawa')">神奈川</li> 11 <div v-show="selectC === 'kanagawa'"> 12 <input type="checkbox">複数選択 13 <input type="checkbox">複数選択 14 <input type="checkbox">複数選択 15 </div> 16 <li @click="onSelectC('saitama')">埼玉</li> 17 <div v-show="selectC === 'saitama'"> 18 <input type="checkbox">複数選択 19 <input type="checkbox">複数選択 20 <input type="checkbox">複数選択 21 </div> 22 </ul> 23 </ul> 24 <button>確定</button> 25 <div id="result"> 26 <p>クリックした要素(関東を文字列で出力したい)</p> 27 <p>クリックした要素(東京・神奈川・埼玉のいずれかを文字列で出力したい)</p> 28 <p>チェックした要素を出力したい</p> 29 </div> 30 31export default { 32 name: 'test', 33 data() { 34 return { 35 selectR: '', 36 selectC: '', 37 }; 38 }, 39 methods: { 40 onSelectR(e) { 41 this.selectR = e; 42 }, 43 onSelectC(e) { 44 this.selectC = e; 45 }, 46 },
<======================================▼7/22追記==========================================>
※zackey2さんありがとうございました!
新たな課題
①確定押下時、["複数選択","複数選択"]と、配列のまま文字列が表示されるため、
[]"を抜いて表示させたい(正規表現で試してみるも、TypeError: this.selected.replace is not a function)
②関東、東京などのデータは、サーバーサイドからAPIが返ってくることを想定していますが、今のままの実装でも流用可能でしょうか?
areaMap: { kanto: '関東', kansai: '関西' },
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
上記のあたりは、裏側のデータを持ってきつつ同じだけのデータ量をフロント側で用意してあげなければいけないため難しいのではないか
と感じている。
vue
1 <div> 2 <p>{{ displaySelectR}}</p> 3 <p>{{ displaySelectC }}</p> 4 <p>{{ displaySelectM }}</p> 5 </div> 6 7 <ul> 8 <li @click="onSelectR('kanto')">関東</li> 9 <ul v-show="selectR === 'kanto'"> 10 <li @click="onSelectC('tokyo')">東京</li> 11 <div v-show="selectC === 'tokyo'"> 12 <input type="checkbox" v-model="selected" value="複数選択1">複数選択 13 <input type="checkbox" v-model="selected" value="複数選択2">複数選択 14 <input type="checkbox" v-model="selected" value="複数選択3">複数選択 15 </div> 16 <li @click="onSelectC('kanagawa')">神奈川</li> 17 <div v-show="selectC === 'kanagawa'"> 18 <input type="checkbox">複数選択 19 <input type="checkbox">複数選択 20 <input type="checkbox">複数選択 21 </div> 22 <li @click="onSelectC('saitama')">埼玉</li> 23 <div v-show="selectC === 'saitama'"> 24 <input type="checkbox">複数選択 25 <input type="checkbox">複数選択 26 <input type="checkbox">複数選択 27 </div> 28 </ul> 29 </ul> 30 <button @click="confilm">確定</button> 31 32---以下script 33 34 data() { 35 return { 36 selectR: '', 37 selectC: '', 38 displaySelectR: '', 39 displaySelectC: '', 40 displaySelectM: '', 41 areaMap: { kanto: '関東', kansai: '関西' }, 42 prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' }, 43 } 44 }, 45 methods: { 46 onSelectR(e) { 47 this.selectR = e; 48 }, 49 onSelectC(e) { 50 this.selectC = e; 51 }, 52 confilm() { 53 const selectedStr = this.selected.replace(/["[]]/g, ''); 54 this.displaySelectR = this.areaMap[this.selectR]; 55 this.displaySelectC = this.prefectureMap[this.selectC]; 56 this.displaySelectM = selectedStr; 57 // 削除処理 58 this.selectR = ''; 59 this.selectC = ''; 60 this.selectM = ''; 61 },
よろしくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/19 21:53
2019/07/19 23:41
2019/07/22 14:38