はじめに
.phpファイル上でVue.jsを動かしていて、ブラウザ上でのアクションに合わせてPHPの変数を出力したくなり、はてどうやるんだ？と調べた結果、うまくいったものを紹介します。
問題
筆者の環境
・CDNでVue.jsを導入
・PHPファイルで、HTMLを記述
・Vue.jsのv-forディレクティブで、PHPの連想配列を出力したくなった
解決方法
PHP標準の、json_encode関数を用いることです。
PHPの連想配列そのままでは、Vue.jsで出力することができません。
実例
index.php
<?php $dataArray = array(
array(
"id" => 1,
"name" => 'John'
"age" => '15'
),
array(
"id" => 2,
"name" => 'Mary'
"age" => '15'
),
array(
"id" => 3,
"name" => 'Tom'
"age" => '16'
),
);
?>
<!DOCTYPE html>
<html>
<head>
<!-- Vue.jsをCDNで読み込み -->
</head>
<body>
<div id="app">
<ul class="list" v-for="(data,index) in dataArray :key=index">
<li>{{ data.id }}</li>
<li>{{ data.name }}</li>
<li>{{ data.age }}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
// json_encode()を用いて、PHPの配列をJSON形式に変更する
dataArray: <?php echo json_encode($dataArray); ?>
// ↓ダメな例。値が出力されない。Chromeのdevモードで見ると、Arrayとだけ出力される↓
// dataArray: <?php echo $dataArray; ?>
}
},
})
app.mount('#app')
</script>
</body>
</html>
おわりに
echoでいけるんや、ふーん余裕やん
と思ってから、JSON形式にする手順に気付かずしばらく悪戦苦闘しました。
知ってしまえばなんてことはない話ですが、誰かの助けになれば幸いです。