Question

我尝试编写一个Basic vue脚本，但它在我的larave刀片模板中不起作用。

我收到此错误：

app.js：32753 [Vue warn]：未定义属性或方法“message”   在实例上但在渲染期间引用。确保这一点   属性是反应性的，可以是数据选项，也可以是基于类的   组件，通过初始化属性。看到：   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

（找到）

到目前为止的守则：

@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

看不出有什么问题。所以问题可能来自这段代码

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

您的布局/ app.blade.php

可能没有yield('javascript')

Answer 2

data应该是一个返回对象的函数。

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

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

Laravel刀片上的Vuejs

2 个答案: