在Laravel中使用Vue组件

时间:2019-01-30 07:19:24

标签: php laravel vue.js

在Laravel Blade文件中使用Vue组件时遇到一些麻烦。 Laravel 5.8默认带有Vue.js,我创建了一个组件并将其全局注册到bootstrap.js文件中。

现在,我正在尝试将一些道具从刀片视图传递给组件。这是整个刀片视图:

@extends('admin._base')

@section('title', 'Producers')

@section('sidebar')
    @parent
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <entity-table :header-props="tHeaders"></entity-table>
        </div>
    </div>
@stop
<script>
    export default {
        data() {
            return {
                tHeaders: ['first name', 'last name', 'email']
            };
        }
    }
</script>

我遇到这些错误:

Uncaught SyntaxError: Unexpected token export

还有:

Property or method "tHeaders" 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.

如果我不尝试将任何道具传递给刀片文件,Vue组件在刀片文件中都可以正常工作,但我无法使脚本部分正常工作。

编辑:

这是我的package.json文件:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.3.1",
        "axios": "^0.18",
        "babel-loader": "^8.0.5",
        "bootstrap": "^4.1.1",
        "bootstrap-v4-rtl": "^4.1.1-1",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.22",
        "webpack": "^4.29.0"
    }
}

我还有一个.babelrc文件,其中包含:

{ "presets": ["@babel/env"] }

1 个答案:

答案 0 :(得分:1)

您不能将ES5 / ES6语法放入Laravel刀片文件中。

2个解决方案,可在laravel刀片文件中使用vuejs:

  1. 使用如下所示的纯浏览器JavaScript

    'Fido'

    确保首先加载var app = new Vue({ data: { tHeaders: ['first name', 'last name', 'email'] } }) 文件的转换版本(通过laravel混合)。

  2. 使用bootstrap.js将es6 js文件转换为浏览器版本

    阅读文档以获取更多信息:__getattribute__