如何将 PHP 数组传递给 Vue.js？

Question

我有 trainers.inc.php 文件，它使用从数据库中检索的数据生成数组：

$trainers_meta[0] = array('Id' => $id, 'Name' => $name, 'Description' => $description, 'Experience' => $experience, 'Focus' => $focus, 'Fileformat' => $format, 'File' => $file);

我使用 PHP json_encode() 函数将 PHP 数组编码为 JSON：

$trainers_meta = json_encode($trainers_meta);

转换过程没有任何我特别检查过的警告或错误。在我的index.php 文件的顶部，我需要trainers.inc.php 文件：

require_once('trainers.inc.php');

在文件的底部，我创建了一个 JavaScript 变量，其中包含 <script> 标记内的转换后的 JSON 内容：

<script>
    let trainersMeta = <?php echo $trainers_meta;?>;
</script>

在文件底部我链接到 Vue.js CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26"></script>

在index.php 文件的上方，我尝试使用Vue.js 的v-for 属性来回显HTML 代码：

<div class="container" v-for="trainer in trainersMeta">
   <h1>Should appear on the page</h1>
</div>

但从未出现任何内容。我的 IDE 告诉我 trainersMeta 变量未定义的警告。我知道 Vue.js 必须在加载之前看到变量，这就是我在实际导入 CDN 之前对其进行初始化的原因。此外，我将<script> 标记放在变量上的文件或位置并不重要，始终未定义。我不能简单地在 Vue.js 代码中初始化变量，因为 Vue.js 在这方面与 PHP 完全不兼容。即使将所有 Vue.js 代码放在 index.php 中的 <script> 标记内也不起作用，并且 Vue.js 代码根本不会因为它而编译。如何将 PHP JSON 编码变量传递给 Vue.js 以供其查看/使用？

Answer 1

不管怎样，我在今天之前从未使用过 Vue.js。我收集到的所有东西，大约 5 分钟后从documentation 收到。

你已经：

• 创建了一个变量 (trainersMeta)
• 构建了一个模板 (<div class="container")
• 已加载 Vue 库 (<script)。

你没有：

• 编写了一个 Vue 应用程序来使用该数据

您需要创建一个对象，该对象具有返回您创建的对象的数据方法，并且您需要使用该对象调用Vue.createApp，然后将其安装在模板周围的容器上。

这样的：

<script>
  let trainersMeta = {
    Id: 123,
    Name: 'Bob'
  };
</script>
<div id="app">
  <div class="container" v-for="trainer in trainersMeta">
    <h1>Should appear on the page</h1>
    {{trainer}}
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26"></script>

<script>
  const Trainers = {
    data() {
      return {
        trainersMeta
      }
    }
  }

  Vue.createApp(Trainers).mount('#app')
</script>