Laravel 刀片上的 Vuejs

Posted 2023-02-23

【中文标题】Laravel 刀片上的 Vuejs

【英文标题】：Vuejs on Laravel blade

【发布时间】：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保险前放置

【参考方案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