Question

在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"] }

Answer 1

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

有 2个解决方案，可在laravel刀片文件中使用vuejs：

使用如下所示的纯浏览器JavaScript
```
'Fido'
```
确保首先加载var app = new Vue({ data: { tHeaders: ['first name', 'last name', 'email'] } })文件的转换版本（通过laravel混合）。
使用bootstrap.js将es6 js文件转换为浏览器版本

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

在Laravel中使用Vue组件

1 个答案: