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

Posted 2023-02-14

【中文标题】如何将 PHP 数组传递给 Vue.js？

【英文标题】：How do I pass a PHP array to Vue.js?

【发布时间】：2022-01-21 02:38:38

【问题描述】：

我有 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 以供其查看/使用？

【参考方案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>

【讨论】：

非常感谢您提供的示例。你是对的，我没有用应用程序安装变量。相信我，尽管在我首先提出问题之前，我已经花费了数小时浏览文档和各种网站，但找不到一个可以为我指明解决方案的相关示例。这很简单，但至少对我来说太难了。谢谢。