Laravel 刀片上的 Vuejs答案

【问题标题】：Vuejs on Laravel bladeLaravel 刀片上的 Vuejs
【发布时间】：2018-04-01 12:04:46
【问题描述】：

我尝试编写一个基本的 vue 脚本，但它在我的 larave 刀片模板中无法正常工作。

我收到此错误：

app.js:32753 [Vue 警告]：未定义属性或方法“消息” 在实例上，但在渲染期间引用。确保这属性是反应性的，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： 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

【问题讨论】：

看不出有什么问题，也许你已经在别处定义了一个 vue 实例，它正在该实例中寻找消息。
你的 vue.js 文件在哪里导入。写vue保险前放置

标签： javascript laravel vue.js blade

【解决方案1】：

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

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

您的 layouts/app.blade.php 中可能没有 yield('javascript')

【讨论】：

您好，我定义了另一个 vue 实例，但不允许使用不同的名称？
这是允许的，但它应该有一个不同的元素。 el: '#不同'

【解决方案2】：

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

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

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

【讨论】：