我正在尝试在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
。
答案 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 }}";