исключение "Symfony Component HttpKernelExceptionNotFoundHttpException"

#javascript #laravel #vuejs2 #axios #single-page-application

#javascript #laravel #vuejs2 #axios #одностраничное приложение

Вопрос:

Используя Vue (SPA) в Laravel-8
, я пытаюсь использовать событие и извлечь некоторые данные из компонента, но данные не извлекаются, и я получаю ошибку: — 404

исключение «Symfony Component HttpKernelExceptionNotFoundHttpException»

Вот Contacts.vue, который я использую для отправки запроса события displayMessages:-

 <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}', [AppHttpControllersChatsController::class, 'displayMessages']);

Вот контроллер:-

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

1. вы говорите, что используете api/display-message/{id} , но показываете другой маршрут, api/display-messages/{id} … message != messages

2. В моем web.php файл У меня есть этот маршрут Route::get('/api/display-messages/{id}', [AppHttpControllersChatsController::class, 'displayMessages']); , и я использую тот же маршрут в моем displayMessages.vue axios, и я получаю эту ошибку, поскольку я всего лишь новичок, я не знаю, что означает эта ошибка и почему она показывает, что не так с моими кодами.

3. ваш код javascript использует axios.get('/api/display-message/' id) … это не api/display-messages/{id} так … снова, message != messages

4. Ооо, Манн, спасибо… Так что это просто потому, что я использую message, а не messages в своих axios. Я не могу это проверить, потому что мой ноутбук просто сломался.

5. @lagbox Вы были правы, это была просто опечатка, можете ли вы опубликовать это как ответ, чтобы я мог пометить его правильно

Ответ №1:

Ошибка ввода в displayMessages.vue в маршруте axios:-

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

Ответ №2:

Действительно ли этот маршрут существует и возвращает что-то?

 /api/contacts-list