Question

我正在尝试在Laravel 5.4上构建一个页面，其中包含一些需要操作然后通过视图发送的数据。我的视图包含vuejs v2.0的组件。我希望这些数据在组件中实现。我尝试使用laracasts PHP Vars to JS transformer但无法获得它。我按照步骤"laracasts/utilities": "~2.0"放置了composer.json然后我添加了文档中提到的serviceprovider，我发布了供应商并在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;然后我删除并尝试使用use JavaScript

现在，在我的资产文件夹中的app.js文件中，我包含了每个组件并尝试执行console.log(foo);，但是它没有定义错误foo。

Answer 1

根据您要实现的目标以及项目的设置方式，有几种方法可以执行此操作。最简单的方法是从返回json的组件内部向控制器发出请求。 Laravel 5.4附带axios，因此您可以使用它：

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作为道具传递给任何需要它们的组件：

这是JSFiddle：https://jsfiddle.net/3e05qwLh/

如果您有多个依赖于变量的后代，您可能需要查看使用vuex。

Answer 2

Dunno如果有帮助，但我使用此方法将变量传递给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，则可以直接使用此方法：

foo = "{{ $foo }}";

如何将laravel控制器中的javascript变量传递给vuejs组件

2 个答案: