はじめに

.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形式にする手順に気付かずしばらく悪戦苦闘しました。
知ってしまえばなんてことはない話ですが、誰かの助けになれば幸いです。