Tajuk yang dinyatakan semula ialah: Pelaksanaan cangkuk yang dipasang mengalami ralat yang tidak dikendalikan

Question

Saya sedang mencipta aplikasi web tugasan. Saya telah berjaya mengambil semua item senarai tugasan dan memaparkannya di halaman utama saya. Masalahnya datang apabila saya cuba mendapatkan hanya satu artikel dan memaparkannya, ia mengembalikan cangkuk bukan ralat fungsi.

Saya menggunakan laravel di bahagian pelayan dan vite di bahagian pelanggan.

Berikut ialah laluan api.php saya

<?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);

Dalam laluan ketiga, saya menggunakan uuid untuk mendapatkan satu jawatan dan memaparkannya. Dipaparkan dengan betul di bahagian pelayan

Berikut ialah TodoController.php dan TodoResource saya masing-masing.

<?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,
        ];
    }
}

Saya telah mengambil siaran di sebelah pelayan pelanggan menggunakan axios. Berikut ialah kod 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
    }
}

Berikut ialah halaman yang memaparkan satu siaran pada bahagian pelayan-pelanggan

<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>

Halaman Penghala Saya

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
})

Saya cuba mencari penyelesaian mengapa apabila saya cuba mendapatkan satu jawatan, cangkuk yang dibawanya bukan fungsi. Bolehkah sesiapa membantu saya menyelesaikan masalah ini?

Answer 1

Cuba jalankan dengan cara ini

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

Seperti yang ditunjukkan di bawah: https://vuejs.org/api/composition -api-lifecycle.html#onmounted