Le titre réexprimé est : L'exécution du hook monté a rencontré une erreur non gérée

Question

Je crée une application Web de tâches. J'ai réussi à récupérer tous les éléments de la liste de tâches et à les afficher sur ma page d'accueil. Le problème survient lorsque j'essaie d'obtenir un seul article et de l'afficher, il renvoie le hook n'est pas une erreur de fonction.

J'utilise Laravel côté serveur et vite côté client.

Voici mon itinéraire api.php

<?php

use AppHttpControllersTodoController;
use AppHttpControllersTodosController;
use IlluminateHttpRequest;
use IlluminateSupportFacadesRoute;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});


Route::get('/todos', TodosController::class);
Route::get('/todos/{todo:uuid}', TodoController::class);

Dans la troisième voie, j'utilise uuid pour obtenir un seul message et l'afficher. Affiché correctement côté serveur

Voici respectivement mes TodoController.php et TodoResource.

<?php

namespace AppHttpControllers;

use AppHttpResourcesTodoResource;
use AppModelsTodo;
use IlluminateHttpRequest;

class TodoController extends Controller
{
    //
    public function __invoke(Todo $todo)
    {
        return new TodoResource($todo);
    }
}

TodoResource.php

<?php

namespace AppHttpResources;

use IlluminateHttpResourcesJsonJsonResource;

class TodoResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array|IlluminateContractsSupportArrayable|JsonSerializable
     */
    public function toArray($request)
    {
        return [
            'uuid' => $this->uuid,
            'name' => $this->name,
            'completed' => $this->completed,
            'completed_at' => $this->completed_at,
        ];
    }
}

J'ai récupéré le message côté serveur client en utilisant axios. Voici le code de useTodos.js

import { ref } from 'vue'

import axios from 'axios'


export default function useTodos() {
    const todos = ref([])
    const todo = ref([])


    const fetchTodos = async () => {
        let response = await axios.get('/api/todos')
        todos.value = response.data.data
    }


    const fetchTodo = async (uuid) => {
        let response = await axios.get(`/api/todos/${uuid}`)
        console.log(response)
        todo.value = response.data.data
    }


    return {
        todos,
        fetchTodos,
        todo,
        fetchTodo
    }
}

Ce qui suit est une page qui affiche une seule publication côté client-serveur

<template>
    <div>
        {{ todo }}
    </div>
</template>

<script>

import useTodos from '../api/useTodos'
import { onMounted } from 'vue'

export default {
    props: {
        uuid: {
            required: true,
            type: String
        }
    },
    setup(props) {
        
        const { todo, fetchTodo } = useTodos()

        onMounted(fetchTodo(props.uuid))

        return {
            todo
        }
    },
}
</script>

Ma page de routeur

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../pages/Home.vue'
import Todo from '../pages/Todo.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/todos/:uuid',
        name: 'todo',
        component: Todo,
        props: true
    }
]

export default createRouter({
    history: createWebHistory(),
    routes
})

J'essaie de trouver une solution pour expliquer pourquoi lorsque j'essaie de recevoir un seul message, l'accroche qu'il apporte n'est pas une fonction. Quelqu'un peut-il m'aider à résoudre ce problème ?

Answer 1

Essayez de l'exécuter de cette façon

async onMounted(() => {
  await fetchTodo(props.uuid)
})

Comme indiqué ci-dessous : https://vuejs.org/api/composition -api-lifecycle.html#onmount