425412 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

プログラミング好きなきょうゆうくんのブログ

プログラミング好きなきょうゆうくんのブログ

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! --/--
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x

PR

プロフィール

きょうゆうくん

きょうゆうくん

カレンダー

バックナンバー

カテゴリ

日記/記事の投稿

コメント新着

コメントに書き込みはありません。

キーワードサーチ

▼キーワード検索

2024.05.14
XML
カテゴリ:Vue.js
参考サイト
Vue3+axiosでlocalサーバにアクセス


​​ app.vue


<script setup>
import hoge from './components/hoge.vue'
</script>
<template>
  <main>
    <hoge />
  </main>
</template>
<style scoped>
</style>

​hoge.vue​

<script setup>
import axios from "axios";
import { reactive } from "vue";
const url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json";
defineProps({
  msg: String,
})
const data = reactive({
  responses: "",
  keyWord: "",
});
const getData = async () => {
  let result = await axios.get(url, {params: {prompt: data.keyWord}});
  data.responses = result.data;
};
</script>
<template>
  <h1>{{ msg }}</h1>
  <button @click="getData">東京の天気取得</button>
  <hr>
  <div >
    {{ data.responses.text }}
  </div>
​</template>

​結果​



実験サイト







お気に入りの記事を「いいね!」で応援しよう

最終更新日  2024.05.14 18:03:56
コメント(0) | コメントを書く
[Vue.js] カテゴリの最新記事


フリーページ

サイド自由欄


© Rakuten Group, Inc.