时间戳

首页 > 解决方案 > 如何将 PHP 变量插入 Laravel 刀片中的 Vue 计算函数？

javascript - 如何将 PHP 变量插入 Laravel 刀片中的 Vue 计算函数？

问题描述

我需要$price_php在 this 中绑定价格Vue object。我们在项目中不使用模板和导入的组件

<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 v-bind:price="$price_php">Computed amount: "@{{ amount }}"</p>

  </div>
<script>
var vm = new Vue({
            el: '#example',
              data: {
                quantity: 10
              },
              // props: ['price'],
              computed: {
                amount: function () {
                  return price*this.quantity
                }
              }
            })
</script>

标签： javascriptphplaravelvue.jslaravel-blade

解决方案

我相信这样的事情会为你工作。

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

想法参考：请参阅https://laravel.com/docs/7.x/blade#displaying-data上的“渲染 JSON”子标题

推荐阅读