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

时间:2017-03-01 08:50:13

标签: laravel vue.js vuejs2 laravel-5.4

我正在尝试在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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:-1)

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 }}";