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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

3487閲覧

vue.jsでdatalist要素内のどのoptionが選択されたかを取得したい

hibikikudo

総合スコア238

Vue.js

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2019/01/21 03:09

編集2019/01/21 07:30

前提・実現したいこと

vue.jsでdatalist要素内のどのoptionが選択されたかを取得したい。

下記のコードはまずAPI「some_api」から取得したJSONデータの特定のキー名「name」をdatalist要素内のoption要素に並べています。
そして、datalist内のoption選択(Changeイベントが発生した)タイミングで、どのoption要素が選択されたかをconsole.log()を使って書き出したいです。

発生している問題・エラーメッセージ

datalist要素はselect要素と違いvalue属性の値がテキストとして入力欄にそのまま表示される。そのためvalue属性に数字を入れてn番目を数える方法が使えません。
また、selectObject.selectedIndexプロパティはdatalist要素には使えないようです。
indexOf()を使えばいいのかなと考えているのですが、でうまく取得する方法がわからず困っています。
また、v-modelにはPOST用の

該当のソースコード

vue

1<input type="text" list="list" id="input_field" @change="getNthOption" v-model="post_data.name"> 2<datalist id="list"> 3 <option v-for="(item, index) in items" :key="index" :value="item.name"></option> 4</datalist> 5<script> 6import "es6-promise/auto"; 7import axios from 'axios'; 8export default { 9data() { 10    return { 11    post_data: { 12 name: '', 13 }, 14 } 15 }, 16created() { 17 this.init(); 18 }, 19methods: { 20 init() { 21 const api = axios.create(); 22 axios.all([ 23 api.get(`${ this.$root.domain }some_api`, this.$root.setAxiosConfig()), 24 ]).then( axios.spread( (res) => { 25 const data = res.data.Result.Items; 26 this.items = data; 27 })) 28 .catch((err)=> { 29 console.warn('err', err); 30 }); 31 }, 32 getNthOption(){ 33 axios.get(`${ this.$root.domain }some_api`, this.$root.setAxiosConfig()) 34 .then((res)=> { 35 //現在は1番目のoptionを取得しています 36 console.log(res.data.Result.Items.splice(res, 1)[0]) 37 //ここに選択されたn番目のoption要素を取得したい 38 }) 39 .catch((err)=> { 40 console.warn('err', err); 41 }); 42 } 43 } 44} 45</script>

補足情報(FW/ツールのバージョンなど)

vue v2.5.22
Chrome v71

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

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

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

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

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

guest

回答1

0

ベストアンサー

<input>タグにv-modelを設定すれば入力は取得できるのでサンプルコード書くとこんな感じでしょうか。
使い回すことを考えると<datalist>id属性はpropsで設定するようにしたほうが良いです。

vue

1<template> 2 <div> 3 <input type="text" :list="listId" v-model="value" @change="onChange" /> 4 <datalist :id="listId"> 5 <option 6 v-for="(item, index) in items" 7 :key="index" 8 :value="item.name" 9 ></option> 10 </datalist> 11 </div> 12</template> 13 14<script> 15export default { 16 17 props: { 18 listId: { 19 type: String, 20 required: true 21 } 22 }, 23 24 // computed.selectedOption でエラーが出てしまうので初期化必須。 25 data() { 26 return { 27 value: '', 28 items: [{ name: "foo" }, { name: "bar" }] 29 } 30 }, 31 32 computed: { 33 // 選択中のオプションオブジェクト。任意入力値の場合は null を返す 34 selectedOption() { 35 const selected = this.items.find(item => item.name === this.value) 36 return selected || null 37 } 38 }, 39 40 methods: { 41 onChange() { 42 console.log(this.selectedOption) 43 } 44 } 45 46} 47</script>

投稿2019/01/21 04:13

yhg

総合スコア2161

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

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

hibikikudo

2019/01/21 09:01

ご回答いただきどうもありがとうございます。 上記のコードを参考に動かすことができました。 算出プロパティ(computed)をこんな風に使うという事を知りました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問