前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/21 09:01