I'm working on a laravel inertia project and I want to make an authorization system... currently, I'm tryn to make the Role Crud and hide some buttons.. So I installed the laravel permission package and I follow the documentation to pass de data: https://inertiajs.com/authorization 'can' property should be passed to the view as an object but it gives me undefined

//in the Role Controller//
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use App\Models\Permission;
use App\Models\Role;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;

use PhpParser\Node\Stmt\Return_;

use \Illuminate\Auth\Middleware\Authorize;

class RoleController extends Controller
{
    public function __construct()
    {
        $this->middleware('can:ver-rol', ['only' => ['index', 'show']]);
        $this->middleware('can:crear-rol', ['only' => ['create', 'store']]);
        $this->middleware('can:editar-rol', ['only' => ['edit', 'update']]);
        $this->middleware('can:borrar-rol', ['only' => ['destroy']]);
    }


    public function index()
    {
        $roles = Role::orderBy('id', 'desc')->get();

        return Inertia::render('Roles/Index', [
            'roles' => $roles,
            'can' => [
                'create' => Auth::user()->can('ver-rol'),
                'edit' => Auth::user()->can('editar-rol'),
                'delete' => Auth::user()->can('borrar-rol'),
            ]
        ]);
    }

//in the index.vue
<script>
import Layout from '../../Shared/Layout.vue'
import { Head, Link } from '@inertiajs/inertia-vue3'
import Icon from '../../Shared/Icon.vue'
import { useForm } from "@inertiajs/inertia-vue3";

export default {

    components: {
        Head,
        Link,
        Icon,
      

    },

    
    props: {
        roles: Object,
        can: Object
    },

    layout: Layout,

    setup(props) {

        const formDelete = useForm({});

        function eliminarRol(id) {
            formDelete.delete(route('roles.destroy', id))
        };



        return {
            eliminarRol
        }
    }



}

</script>

//when I open the view this is what happened:

$props.can is undefined

Any idea of what can I possibly be doing wrong?

CodePudding user response：

you are mixing vue2 and vue3 syntax. vue2 / the options-api has no setup method.

// this is vue2
export default {
  props: {
    roles: Object,
    can: Object
  },
  // ...
}

// this is vue3
<script setup>
defineProps({ roles: Object, can: Object })
</script>

you may want to check the docs