WordPress に Vue.js を スモールスタートで入れてみる その4
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その4
今回は記事ページでの情報取得について
詳細ページで記事情報の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モジュール編