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

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

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

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

受付中

vue API取得の方法

bskbbb
bskbbbggg

総合スコア22

Vue.js

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

0回答

0評価

1クリップ

95閲覧

投稿2022/06/24 08:07

編集2022/06/24 20:26

実現したいこと:
VueでAPIを非同期通信で渡したい。

現在:
APIの情報が取得できていない。
変数(results) にAPIの情報を格納しようとしているが、undifinedとなってしまう

サイトを使って調べたりしたのですが、何が原因かがわからなかったので質問しました。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app1"> <ol> <li v-for="result in results">{{ result }}</li> </ol> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> <script type="text/javascript" src="../js/test_api.js"></script> </body> </html>
var app = new Vue({ el: '#app1', data: { results: [] }, mounted: function() { var self = this; axios .get("http://localhost/test/restaurant_list.php") .then(function(response) { self.results = response.data.results; }) .catch(function(error) { console.log('取得に失敗しました。', error); }) } })
<?php header("Access-Control-Allow-Origin: *"); try{ $pdo = new PDO( "mysql:dbname=prolab_sql_task;host=localhost;charset=utf8mb4", "root", "root", [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, ] ); $sql = "SELECT * FROM restaurant_list.restaurant_into"; $stmt = $pdo->prepare($sql); $stmt->execute(); $data = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($data); }catch(PDOException $e) { //エラー発生時 echo $e->getMessage(); exit; } ?>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

ku__ra__ge

2022/06/24 11:26

console.log(response);を使ってresponseがdata.resultsを持っているか確認すると結果はどうなりますか?

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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