Laravel刀片上的Vuejs

Question

我试图编写一个Basic vue脚本，但它在某种程度上在我的larave blade模板中不起作用。

我得到这个错误：

app.js:32753 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

(found in)

到目前为止的代码：

@extends('layouts.app') 

@section('content') 

    <div id="foo"> 
     @{{ message }} 
    </div> 

@endsection 

@section('javascript') 
    <script> 
    new Vue({ 
     el: '#foo', 
     data: { 
     message: 'Hello Vue!' 
     } 
    }) 
    </script> 
@endsection 

Answer 1

data应该是返回一个对象的功能。

new Vue({ 
    el: '#foo', 
    data: function() { 
    return { 
     message: 'Hello Vue!' 
    } 
    } 
}) 

来源：https://vuejs.org/v2/style-guide/#Component-data-essential

Answer 2

看不到有什么不对。所以这个问题可能是这段代码

@section('javascript') 
    <script> 
    new Vue({ 
     el: '#foo', 
     data: { 
     message: 'Hello Vue!' 
     } 
    }) 
    </script> 
@endsection 

您可能没有yield('javascript')你的布局/ app.blade.php