Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(33)Vue.jsでAJAXを使う

33. Vue.jsでAJAXを使う

  • Vue.jsバージョン: 2.5.2
    • axiosライブラリを併用しています。
  • [Yes or No]ボタンをクリックすると、yesno.wtfの画像をランダムに表示します。
  • 画面をリロードすると元に戻ります。

サンプルコード

ポイント

axiosライブラリを使うとAJAXのやりとりを以下のように簡単に書けるので便利です。

  const vm = new Vue({
    el: "#app",
    data: {b: null},
    methods: {
      a: function() {
        axios.get("https://yesno.wtf/api").then((r) => {this.b = r.data.image})
      },
    },
  })

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。