如何将PHP数组传递给Vue.js组件？语法错误排查

嘿，我来帮你排查这个报错的原因～

你遇到的Uncaught SyntaxError: Unexpected token }错误，核心问题出在PHP数组传递给Vue的方式上：

• 首先，你的PHP代码<?php $number ?>并没有输出任何内容，因为缺少了echo语句，导致生成的JS代码里formdata:后面是空的，JS解析时自然会报错。
• 其次，就算你加上了echo，直接打印PHP数组的话，输出的是字符串Array，这在JS里是不合法的数组格式，同样会引发语法错误。

正确的实现方式 #

要把PHP数组安全传递给Vue，需要用json_encode()把PHP数组转换成JS能识别的JSON格式，再通过echo输出到JS代码中。修正后的完整代码如下：

<?php $number = ['one', 'two', 'three']; ?>
<!-- 确保根元素有对应的id，和Vue实例的el匹配 -->
<div id="orderform">
  <orderform :orderd="formdata"></orderform>
</div>
<script>
const app = new Vue({
    el: '#orderform',
    data(){
        return {
            // 用json_encode转成合法的JS数组，echo输出内容
            formdata: <?php echo json_encode($number); ?>
        }
    }
});
</script>

额外说明 #

• json_encode()会自动处理PHP数组到JSON的转换，生成的格式完全符合JS语法要求，不管是索引数组还是关联数组都能正确转换。
• 别忘了确保Vue实例挂载的根元素（#orderform）存在，否则Vue无法正常初始化组件。

内容的提问来源于stack exchange，提问作者muya.dev