如何将变量从 laravel 5.4 传递给 vuejs答案

【问题标题】：How to pass a variable from laravel 5.4 to vuejs如何将变量从 laravel 5.4 传递给 vuejs
【发布时间】：2017-11-09 00:57:38
【问题描述】：

是否可以将变量从控制器传递给 vuejs？我已经阅读了一些答案，但似乎没有什么对我有用。我想将变量 $url 传递给 vue。我尝试过这样的事情

var url = {!! $url !!}; 这给了我语法错误：app.js 中的意外标记

示例网址http://eventregistry.org/json/suggestConcepts?prefix=sam&lang=eng&callback=JSON_CALLBACK

控制器

class SearchCompanyName extends Controller
{
    public function getcompanyname($name)
    {
      return "http://eventregistry.org/json/suggestConcepts?prefix=" . $name . "&lang=eng&callback=JSON_CALLBACK";
    }   

    public function index()
    {  
       $url = $this->getcompanyname(Input::get("company_name_by_user"));
       return view('searchcompany', ['url' => $url]);

    }
}

vue app.js

Vue.component('search', require('./components/Searchnames.vue'));
const search = new Vue({
    el: '#search',
    data: {
    },
    method: {
        getMessages: function(){
            console.log('I am here')
        }()
    }
});

刀片模板

@section('content')
<div class="container">
{!! $url !!}
 <search></search>
</div>

@endsection

【问题讨论】：

尝试为您的搜索组件添加一个道具：例如并在您的 vuejs 组件中，添加道具“url”并通过 this.url 访问 url。
什么是语法错误？ var url = {!! 的来源是什么？ $网址!!};看起来像在页面上？
语法错误是 var url = {!! $url !!}
添加 o 道具也会给出错误 - 无效表达式：：url=eventregistry.org/json/…
添加一个道具是要走的路。阅读有关它的 vue 文档。 vuejs.org/v2/guide/components.html#Props

标签： javascript php laravel laravel-5 vuejs2

【解决方案1】：

如果你想在刀片文件的脚本标签中声明你的 javascript 变量，你需要像这样将变量放在引号中

<script>
  var url = '{{ $url }}';
</script>

【讨论】：

谢谢这个工作，但我在想如何在 app.js 中访问这个变量
@Imi 我如何实现这一点是通过在我的主刀片文件中定义所有 php-javascript 变量，如上所示，然后我在 app.js 脚本中引用它。确保在声明变量后调用 app.js 脚本。
谢谢不知道我们可以做这样的事情:)

【解决方案2】：

你可以使用这个包：https://github.com/laracasts/PHP-Vars-To-Js-Transformer

public function index()
{
    JavaScript::put([
        'foo' => 'bar',
        'user' => User::first(),
        'age' => 29
    ]);

    return View::make('hello');
}

【讨论】：

由于我完全支持这个答案，我无法让它与 laravel 5.4 一起正常工作。它不断出现“使用非复合名称 'Javascript' 的使用语句无效”