質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

1203閲覧

<vue.js>選択した要素のvalueを「確定ボタンを押した時に」文字列で出力したい

frtne

総合スコア29

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2019/07/19 15:36

編集2022/01/12 10:55

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 },

よろしくお願い致します。

zackey2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

<p>クリックした要素(関東を文字列で出力したい) </p> <p>クリックした要素(東京・神奈川・埼玉のいずれかを文字列で出力したい)</p>

パッと見た感じではこの二つは以下でいけそうだと思いました
{{selectR}}
{{selectC}}

<p>チェックした要素を出力したい</p>

html

1 2 <input type="checkbox" value="item1" v-model="selectedItem">複数選択 3 <input type="checkbox" value="item2" v-model="selectedItem">複数選択 4 <input type="checkbox" value="item3" v-model="selectedItem">複数選択

として

data() { return { selectR: '', selectC: '', selectedItem: '' };

としたらいけるんじゃないかなと思いました
https://jp.vuejs.org/v2/guide/forms.html

投稿2019/07/19 17:09

zackey2

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

frtne

2019/07/19 21:53

ご回答ありがとうございます! {{selectR}} {{selectC}} 上記ですと、テキスト部分(関東・東京)が出力されず kanto、tokyoとメソッドの引数が表示されてしまいます。 また、確定をクリック時のみ表示させたいのですが可能でしょうか?
zackey2

2019/07/19 23:41

> kanto、tokyoとメソッドの引数が表示されてしまいます。 失礼しました。そうですね。 ```javascript data() { return { selectR: '', selectC: '', displaySelectR: '', displaySelectC: '', areaMap: {kanto : '関東', kansai : '関西'}, prefectureMap: {tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川'} }; ``` 表示用の変数を用意します。 表示用の文字列とキーとなる文字列のマッピングデータを用意します。(連想配列) ```javascript methods: { //略 confirm() { //確定ボタンに@click="confirm"をつける this.displaySelectR = this.areaMap[this.selectR]; this.displaySelectC = this.prefectureMap[this.selectC]; //削除処理    selectR = '';    selectC = ''; } }, ``` ついでに削除 あくまで一例ですが、これでどうでしょうか?
frtne

2019/07/22 14:38

ありがとうございます! こちらをヒントに表示させるところまで叶いました!
guest

0

①確定押下時、["複数選択","複数選択"]と、配列のまま文字列が表示されるため、
[]"を抜いて表示させたい(正規表現で試してみるも、TypeError: this.selected.replace is not a function)

v-forキーワードを使って配列の中身をループで表示したらいいと思います。
https://jp.vuejs.org/v2/guide/list.html

<li v-for="item in selectedItem"> {{ item}} </li>

(selectedItemは配列なので、変数名はselectedItemsとかselectedItemListにすればよかったです・・・)

②関東、東京などのデータは、サーバーサイドからAPIが返ってくることを想定していますが、今のままの実装でも流用可能でしょうか?
どんなレスポンスが帰ってくるかによりますが、
mountedにメソッドを追加し、そのメソッドでAPIを呼び出して返却値をareaMapやprefectureMapにセットしてやればいいかと。
現状のareaMapと同じ形式に変換するか、あるいはAPIの返却値によって今の実装を変える必要があるかと思います。

投稿2019/07/22 14:53

zackey2

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

frtne

2019/07/23 13:53

ありがとうございます!配列の件、for文で回して解消しました! 重ね重ねすみません。。 ①東京を選択して確定、その後神奈川を選択して確定した時は、東京の出力したテキストは消さずに  例えば、神奈川を選択した場合は、東京の下に情報を出力したいのですが、可能でしょうか?? ②そのメソッドでAPIを呼び出して返却値をareaMapやprefectureMapにセットしてやればいいかと。 →裏側(仮にAPIとして) { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },と返してもらうようにすれば良いという理解であっていますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問