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