Question

只需启动有关Laravel 5.8（从0开始）的教程，然后尝试向项目中添加一些JS。安装的NodeJS：npm -v：6.10.1;节点-v：12.6.0; 然后在项目中安装npm并使用npm run watch。毕竟，将ExampleComponent.vue更改为MyButton.vue：

<template>
    <div>
        <button type="submit" class="my-button" v-text="test.name">My Button</button>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')

            axios.post('api/vue', {})
                .then(response => {
                    this.test = response.data
                });
        },

        data: function () {
            return {
                test: null,
            }
        },
        props: [
            'text'
        ]
    }
</script>

<style>
    .my-button{
        background-color: #333333;
    }
</style>

在app.js中注册：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('my-button', require('./components/MyButton.vue').default);

let app;
app = new Vue({
    el: '#app',
});

然后在我看来添加：

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <div id="app">
                        <my-button text="My new test button"></my-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

app.js component error

毕竟，我从Laravel的混合报告中获得了成功：

DONE在16733毫秒内成功编译
下午4:51:01

但是在浏览器中，我没有看到我的按钮。我试过清理缓存。但这没有帮助。有人有建议吗？

Laravel + JS Vue

0 个答案: