[英]Vuejs on Laravel blade
I tried to write a Basic vue script but it somehow does not work in my larave blade template.我试图编写一个基本的 vue 脚本,但它在我的 larave 刀片模板中不起作用。
I get this error:我收到此错误:
app.js:32753 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. app.js:32753 [Vue 警告]:属性或方法“消息”未在实例上定义,但在渲染期间被引用。 Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.通过初始化该属性,确保该属性是反应性的,无论是在数据选项中,还是对于基于类的组件。 See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .请参阅: https ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
(found in ) (在发现 )
The Code so far:到目前为止的代码:
@extends('layouts.app')
@section('content')
<div id="foo">
@{{ message }}
</div>
@endsection
@section('javascript')
<script>
new Vue({
el: '#foo',
data: {
message: 'Hello Vue!'
}
})
</script>
@endsection
Can't see what's wrong.看不出有什么问题。 so the problem is probably with this code所以问题可能出在这段代码上
@section('javascript')
<script>
new Vue({
el: '#foo',
data: {
message: 'Hello Vue!'
}
})
</script>
@endsection
You might not have yield('javascript')
at your layouts/app.blade.php您的 layouts/app.blade.php 中可能没有yield('javascript')
data
should be a function that returns an object. data
应该是一个返回对象的函数。
new Vue({
el: '#foo',
data: function () {
return {
message: 'Hello Vue!'
}
}
})
Source: https://v2.vuejs.org/v2/style-guide/#Component-data-essential来源: https ://v2.vuejs.org/v2/style-guide/#Component-data-essential
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.