如何将javascript变量从laravel控制器传递到vuejs组件

我试图在

laravel5.4

上构建一个页面，其中包含的数据很少，需要进行处理，然后通过视图发送。我的视图包含vuejs v2.0的组件。我希望这些数据在组件中实现。我尝试使用

laracasts PHP Vars to JS transformer

，但无法获得它。我按照步骤将

“laracasts/utilities”：“~2.0”

放在我的

composer.json

中，然后我添加了文档中提到的服务提供者，发布了供应商，并在

config/javascript.php

中添加了以下内容

'bind_js_vars_to_this_view' => 'Nitseditor.show',

我有一个动态视图文件夹，当前在我的

Nitseditor\home\resources\views

中，现在在我的控制器中，我有以下代码：

public function show()
{
    JavaScript::put([
        'foo' => 'bar',
        'age' => 29
    ]);
    return view(Nitseditor.show);
}

首先，它抛出了一个错误，因为我看到它包括

use MongoDB\BSON\Javascript然后我删除并尝试使用
使用JavaScript

现在在我的资产文件夹中的
app.js
文件中，我包含了每个组件，并尝试执行
console.log（foo）但是它抛出了一个错误
foo
未定义。
不知道是否有帮助，但我使用此方法将变量传递给javascript：

// in master layout (head section)
<meta name="foo" content="{{ $foo }}">

// in javascript (included or in the template)
foo = $('meta[name=foo]').attr('content');

不知道这是否有帮助，但我使用此方法将变量传递给javascript：

// in master layout (head section)
<meta name="foo" content="{{ $foo }}">

// in javascript (included or in the template)
foo = $('meta[name=foo]').attr('content');

有几种方法可以做到这一点，这取决于您试图实现的目标以及项目的设置方式。最简单的方法是从组件内部向控制器发出请求，返回
json
Laravel 5.4
随附，因此您可以使用：

methods: {
  getData(){
    axios.get('/controller/route')
    .then(response => {
      // set your variables from the response
      this.myData = response.data;
    })
  .catch(error => {
    console.log(error);
  });
},
data(){
  return {
    myData: {}
  }
}

如果需要子组件访问数据，则需要将其放入父组件中，并使用
props
传递myData

您还可以创建一个指令，并直接从刀片模板向下传递变量：

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

然后，您只需执行以下操作：

<div v-init:vars="{foo: 'foo', age: 29}"></div>



并将
vars
作为道具传递给任何需要它们的组件：

以下是JSFIDLE：

如果您有多个依赖于您的变量的子体，您可能需要考虑使用。
有几种方法可以做到这一点，具体取决于您试图实现的目标和项目的设置方式。最简单的方法是从组件内部向控制器发出请求，返回
json
Laravel5.4
随附，因此您可以使用：

methods: {
  getData(){
    axios.get('/controller/route')
    .then(response => {
      // set your variables from the response
      this.myData = response.data;
    })
  .catch(error => {
    console.log(error);
  });
},
data(){
  return {
    myData: {}
  }
}

如果需要子组件访问数据，则需要将其放入父组件中，并使用
props
传递myData

您还可以创建一个指令，并直接从刀片模板向下传递变量：

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

然后，您只需执行以下操作：

<div v-init:vars="{foo: 'foo', age: 29}"></div>



并将
vars
作为道具传递给任何需要它们的组件：

以下是JSFIDLE：

如果您有多个依赖于您的变量的子体，那么您可能希望使用。
您使用的是jQuery，即使作者要求使用纯javascript+vue。您应该添加用于访问元数据的普通javascript语法。无人要求使用“普通”javascript，laravel 5.4默认安装包括jQuery，请参见此处，这样您的评论就不合适了。您使用的是jQuery，即使作者要求使用普通javascript+vue。您应该添加用于访问元数据的纯javascript语法无人要求“纯”javascript，laravel 5.4默认安装包括jQuery，请参见此处，因此您的评论并不合适。您可以解释我如何执行此操作吗..您可以解释我如何执行此操作吗。。