🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

1561閲覧

Vue.jsのセレクトタグの選択肢をajaxで取得した配列の中身で表示したいです。

amaturePy

総合スコア131

Vue.js

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/01/09 09:11

編集2021/01/10 08:57

Vue.jsで動的なセレクトボックスを作成しております。
選択肢の中身をFlaskで作成したAPIの結果(配列)を選択肢(optionタグ)として表示させたいです。
vue.jsとajaxに関して経験がなく、どうしてもうまくいきません。
アドバイス頂ければ幸いです。よろしくお願いします。
参照サイト

HTML <div id="app2"> <select v-model="table_list_selected"> <option v-for="item in table_list">{{ item }}</option> </select> </div>
main.js new Vue({ el: '#app2', data: () => ({ table_list: '', table_list_selected: '' }), created: function () { axios.get('API').then(response => { this.table_list = response.data }).catch(function (error) { console.log(error) }) } })
APIの返り値 ["test","test1","test2","test3"]

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

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

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

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

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

plasticgrammer

2021/01/09 23:57

うまくいかないとのことですが、Javascriptエラーは発生していますか?
amaturePy

2021/01/10 08:57 編集

はい! すみません。最初の投稿からコードを大幅に変更しており、上の質問文で更新させて頂きました! 依然としてAPIからのデータにアクセスできてないようです。 VScode上のdebug機能上のエラーはネットワークエラーのような物が出ています。
amaturePy

2021/01/10 08:53

node_modules/vue/dist/node_modules/vue/dist/vue.esm.js:9077 failure Error: Network Error at createError (webpack-internal:///../node_modules/axios/lib/core/createError.js:16:15) at XMLHttpRequest.handleError (webpack-internal:///../node_modules/axios/lib/adapters/xhr.js:84:14) {config: {…}, request: XMLHttpRequest, response: undefined, isAxiosError: true, toJSON: ƒ, …}
plasticgrammer

2021/01/10 11:43

axiosでのデータ取得がうまくいっていないのでは? APIの返り値として書いてあるのは、ブラウザの開発者ツールで確認できている内容でしょうか?
amaturePy

2021/01/10 11:46 編集

いえ、こちらpostmanからAPIのURLを叩いた結果になります。 なので、こちらのデータ型が問題かもしれません。 ただの配列になっているのでキー:値のJson形式にしてあげないといけないのかと調べております。
amaturePy

2021/01/10 13:09

ブラウザ上で見るとAccess to has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourceとエラーが出てました。 Jsを扱う際は自分でカスタムしたエディターではなくブラウザのデバックツールを使うようにします! こちらのヒントを参考に試してみます! ベストアンサーをお渡ししたいのですが、上の文章を解答として載せて頂くことは可能でしょうか??
plasticgrammer

2021/01/10 13:20

ヘッダに Content-Type: application/json" を設定して返してますか?
amaturePy

2021/01/10 13:47 編集

いえ、入れておりません。 今いれる方法をググりながら以下のように試している所です。 data: () => ({ table_list: '', table_list_selected: '', headers: { 'Content-Type': 'application/json' } }),
plasticgrammer

2021/01/10 23:42

説明不足ですみません。Content-Typeの件はAPIのレスポンスの話です。
amaturePy

2021/01/11 05:10

今API側に追加してajaxで取得確認できました。初めてajaxを触って見たのですが、いろいろ勉強になりました!今後も精進します! ベストアンサーを押させて頂きたいので、解答欄に頂戴できますでしょうか?
guest

回答2

0

ベストアンサー

エラーの内容からaxiosでのデータ取得がうまくいっていないものと思いました。
記載されている「APIの返り値」はJSONとして妥当なので、レスポンスのヘッダに
Content-Type: application/json"
が設定されているかご確認ください。

投稿2021/01/12 00:05

plasticgrammer

総合スコア629

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

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

0

async createdではなく async mounted でやってみてはどうでしょうか

投稿2021/01/10 07:13

mikkame

総合スコア5036

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

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

amaturePy

2021/01/10 08:44

すみません。最初の投稿からコードを大幅に変更しており、上の質問文で更新させて頂きました! はい!created→mountedでも試したのですが、依然としてデータが取得できずです。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問