javascript - 异常“Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException”

Question

在 Laravel-8 中使用 Vue(SPA)
我正在尝试使用事件并从组件中获取一些数据，但没有获取数据并且我得到的错误是：- 404

异常“Symfony\Component\HttpKernel\Exception\NotFoundHttpException”

这是我用来发送DisplayMessages事件请求的Contacts.vue ：-

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Contacts List</div>

                    <div class="card-body">
                        <ul v-for="contact in contacts" :key="contact.id" >
                           <li>
                           <button @click="displayMesages(contact.id)"> 
                                
                               {{contact.name}} 
                            
                           </button>
                           </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                contacts: []
            }
        },
        mounted() {
            axios.get('/api/contacts-list')
            .then(response => this.contacts = response.data)
        },
        methods: {
            displayMesages(id){
                console.log(id);
                DisplayMessages.$emit('refresh', id);
            }
        }

    }
</script>

这是收到请求的DisplayMessages.vue ：-

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Display Messages</div>

                    <div class="card-body">
                        <h2 v-for="message in messages">{{message.message}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // import contacts from './ContactsList.vue'; 
    export default {
        data() {
            return {
                contacts: [],
                messages: []
            }
        },
        mounted() {
            DisplayMessages.$on('refresh', (id)=>{
                axios.get('/api/display-message/'+ id).then(response => this.messages = response.data)
            });
        }
    }
</script>

这是DisplayMessages正在获取的路线：-

Route::get('/api/display-messages/{id}', [App\Http\Controllers\ChatsController::class, 'displayMessages']);

这是控制器：-

public function displayMessages($id)
    {
        return Chats::all();
        
            }

标签： javascriptlaravelvuejs2axiossingle-page-application

Answer 1

在 axios 路由中DisplayMessages.vue出现输入错误：-

mounted() {
            DisplayMessages.$on('refresh', (id)=>{
                axios.get('/api/display-message/'+ id).then(response => this.messages = response.data) //It should be '/api/display-messages/`
            });
        }