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モジュール編