jtk

WordPress に Vue.js を スモールスタートで入れてみる その4

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その4
今回は記事ページでの情報取得について

f:id:jotaki:20190212100544p:plain

詳細ページで記事情報のAPIにアクセス

テンプレートファイル側(.php)で投稿IDを取得して変数 POST_ID に格納しておく

SAMPLE-POSTTYPE-single.php

<?php
$id = get_the_ID();
?>
<script>
  // 投稿IDを.js側へ受け渡す
  const POST_ID = `<?php echo $id; ?>`;
  document.addEventListener('DOMContentLoaded', function() {
    renderSamplePostType()
  })
</script>

.vue 側では

<script>
import { API_POST_URL } from './../variable'
import axios from 'axios';

export default {
  data() {
    return {
      post: [],
    }
  },
  mounted() {
    axios
      .get(`${API_POST_URL}/SAMPLE-POSTTYPE/${POST_ID}/`)
      .then(response => {
        this.post = response.data
      })
  }
}

みたくしたけど、、もう少しよいやり方はありそうな気がしています。
次回は使ったvueモジュール編