如何在Laravel Blade中将PHP变量传入Vue计算属性并实现绑定？

嘿，我来帮你搞定这个问题！你现在需要把PHP的$price_php传给Vue的计算属性，其实核心就是让Vue实例能拿到这个服务端生成的变量，咱们一步步来调整代码：

先说说你原来代码的问题 #

你之前写的v-bind:price="$price_php"是把值绑定到<p>标签的DOM属性上，但Vue实例根本没接收这个值；而且计算属性里直接用price，Vue完全不知道这个变量在哪，肯定会报错。

最简单的解决方案：直接把PHP变量写到Vue的data里 #

因为PHP是服务端渲染，页面加载时会先把$price_php的数值输出到页面中，所以我们可以直接把它赋值给Vue实例的data属性，这样Vue初始化时就能拿到这个值了。

修改后的完整代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>Laravel</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
    <?php $price_php = 100 ?>
    <p>Price: "{{ $price_php }}"</p>
    <p>Computed amount: "@{{ amount }}"</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        quantity: 10,
        price: <?php echo $price_php; ?> <!-- 把PHP变量直接赋值给Vue的data -->
    },
    computed: {
        amount: function () {
            return this.price * this.quantity; <!-- 用this.price访问Vue实例里的price属性 -->
        }
    }
})
</script>
</body>
</html>

关键要点解释 #

1. 传递变量：通过<?php echo $price_php; ?>把PHP的数值直接输出到Vue的data中，页面加载后这部分会变成price: 100，Vue就能识别这个变量了。
2. 访问变量：在计算属性里必须用this.price来访问，因为price是Vue实例的data属性，需要通过this来引用。
3. 移除无效绑定：原来的v-bind:price="$price_php"可以删掉，因为它只是给DOM元素加了个属性，对Vue实例获取值没有帮助。

另一种方式：用props传递（适合组件场景，根实例可选） #

如果你想用props来接收这个值（虽然根实例用data更直接），可以这样写：

var vm = new Vue({
    el: '#example',
    props: ['price'],
    propsData: {
        price: <?php echo $price_php; ?>
    },
    data: {
        quantity: 10
    },
    computed: {
        amount: function () {
            return this.price * this.quantity;
        }
    }
})

不过这种方式更适合Vue组件，根实例直接用data的方案更简单直观。

内容的提问来源于stack exchange，提问作者ivaylosst