vue.js(CDN)で、自作メモAPIからIDを指定してgetしてブラウザに表示してみる。

admin

3年前

laravel8でRestfulなCRUDメモアプリAPIを改良。複数のファイルアップロードに対応してみる。

メモIDを変更すると、動的にメモの表示内容が変化する。

<!-- CDNでvue.jsを使う。npm無くても単体で動く -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <h2>メモID {{memo_id}} </h2>
  <div>
    <!-- メモIDの入力欄 -->
    <input type="text" v-model="memo_id">
  </div>

  <!-- メモIDからmemoデータが見つかったら表示 -->
  <div v-if="memo.success == true">
	<div v-for='data in memo.data'>
	  <div>created_at：{{data.created_at}}</div>
	  <div>title：{{data.title}}</div>
	  <div>content：{{data.content}}</div>
	  <div v-for='upload in data.upload_files'>
        <img :src=upload.file_path height="200"/>
	  </div>
	</div>
  </div>

  <!-- 見つからなかった事を表示 -->
  <div v-else>
      Not Found
  </div>
</div>

<!-- CSS記述 -->
<style>
</style>

<!-- JS処理 -->
<script>

// APIエンドポイント
var API_URL = "http://localhost/restful/public/api/memo/"

var app = new Vue({
  el: "#app",
  data: {
    memo_id: "", //メモID
    memo: "" // APIからもらうmemoデータ
  },

  // 初期化
  created: function () {
    this.memo_id = "1"; // メモIDを初期化
    this.fetchData(); // メモIDを検索して、結果を表示しておく
  },

  // 指定された変数が変更されたら、この関数を実行する
  watch: {
    memo_id: "fetchData"
  },

  methods: {
    fetchData: function () {
      // ajaxで取得
      var xhr = new XMLHttpRequest();
      // 非同期なので、参照渡しでデータ取得する
      var self = this;
      // メモIDをくっつけて、URLを生成
      xhr.open("GET", API_URL + this.memo_id);

      // 非同期なので完了したら・・・
      xhr.onload = function () {
        // 返ってくるデータはJSONなので、パースして変数に格納
        self.memo = JSON.parse(xhr.responseText);
      }
      // サーバへ送信
      xhr.send()
    }
  }
})
</script>

<div>

</div>

<div>created_at：{{data.created_at}}</div>

<div>title：{{data.title}}</div>

<div>content：{{data.content}}</div>

</div>

Not Found

</div>

<style>

</style>

// APIエンドポイント

var API_URL = "http://localhost/restful/public/api/memo/"

var app = new Vue({

el: "#app",

data: {

memo_id: "", //メモID

memo: "" // APIからもらうmemoデータ

// 初期化

created: function () {

this.memo_id = "1"; // メモIDを初期化

this.fetchData(); // メモIDを検索して、結果を表示しておく

// 指定された変数が変更されたら、この関数を実行する

watch: {

memo_id: "fetchData"

methods: {

fetchData: function () {

// ajaxで取得

var xhr = new XMLHttpRequest();

// 非同期なので、参照渡しでデータ取得する

var self = this;

// メモIDをくっつけて、URLを生成

xhr.open("GET", API_URL + this.memo_id);

// 非同期なので完了したら・・・

xhr.onload = function () {

// 返ってくるデータはJSONなので、パースして変数に格納

self.memo = JSON.parse(xhr.responseText);

}

// サーバへ送信

xhr.send()

}

})

</script>

関連記事