我在用户表和区域表之间有一对多的关系，当我返回配置文件数据时，我从用户表中获取area_id，我需要使用模型获取区域名称。有没有办法在个人资料视图中获取区域名称？我尝试在 show.vue 中调用模型函数，但它不起作用。

用户.php

 public function area()
    {
        return $this->belongsTo(Area::class);
    }

区域.php

 public function users()
    {
        return $this->hasMany(User::class);
    }

显示.vue

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Profile
            </h2>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Area : 
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <div v-if="$page.props.jetstream.canUpdateProfileInformation">
                    <update-profile-information-form :user="$page.props.user" />

                    <jet-section-border />
                </div>

                <div v-if="$page.props.jetstream.canUpdatePassword">
                    <update-password-form class="mt-10 sm:mt-0" />

                    <jet-section-border />
                </div>

                <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
                    <two-factor-authentication-form class="mt-10 sm:mt-0" />

                    <jet-section-border />
                </div>

                <logout-other-browser-sessions-form :sessions="sessions" class="mt-10 sm:mt-0" />

                <template v-if="$page.props.jetstream.hasAccountDeletionFeatures"> …

我正在尝试构建一个应用程序作为Laravel 8.38 - InertiaJS 0.8.4我Vue 3的前端堆栈。

我有多个布局，需要将其全局注册为Vue组件，以便我可以在应用程序中的任何地方使用它。我无法这样做，我的代码：

import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';

const el = document.getElementById('app');

const app = createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./../Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin);

app.component('app-market', () => import('./../layouts/AppMarketLayout')); //trying to import layout

app.mount(el);

在页面内部，我尝试调用此布局组件：

<template>
    <div>
        <app-market-layout></app-market-layout>
    </div>
</template>

无法获取，控制台中没有错误。

我有一个使用 VILT 堆栈（Vue、Inertia、Laravel、Tailwind）构建的应用程序。我有一些类似的组件cards可以在应用程序中的任何地方使用。因为我不想每次构建一个在某些目录中注册组件的函数时都手动导入这些组件：

/**
 * Register components from the ./components and ./components/core
 * directories. This way these components don't have to be imported
 * manually every time.
 *
 * @param {Vue instance} app
 */
function registerGlobalComponents (app) {
  const requireComponent = require.context(
    './components' || './components/core',
    true,
    /\.vue$/
  );

  for (const file of requireComponent.keys()) {
    const componentConfig = requireComponent(file);
    const name = file
      .replace(/index.js/, '')
      .replace(/^\.\//, '')
      .replace(/\.\w+$/, '');
    const componentName = upperFirst(camelCase(name));

    app.component(componentName,
      componentConfig.default || componentConfig);
  }
} …

在我的控制器中我有

public function store(Request $request)
    {
        $postData = $this->validate($request, [
            'name' => 'required',
            'status' => 'required | boolean'
        ]);

        Room::create([
            'name' => $postData['name'],
            'active' => $postData['status'],
        ]);

        $message = "Room Added";

        return redirect::route('rooms.index', ['msg' => $message]);
    }

我在道具中使用了“msg”

props:['rooms','errors','msg']

但是对于 {{msg}} 给出了未定义的并且没有任何消息。

我需要像jquery.fullPage那样组织导航:当我滚动一次时 - 我转到下一部分.

我尝试使用jquery.mousewheel,但它在带有触摸板或触控板或APPLE Magic Mouse的MacOS中失败:它每个滚动滚动多个幻灯片.

我试图使用这个解决方案:https://github.com/jquery/jquery-mousewheel/issues/36#issuecomment-67648897

它在Chrome中运行良好,但它不在FF中并且在Safari中存在错误.

这是问题的简单演示:http: //jsfiddle.net/ss5LueLx/13/

$slider.on('mousewheel', function(event) {
    if (event.deltaY>0) {
        slider.prevSlide();
    } else {
        slider.nextSlide();
    }
});

我的项目使用 laravel fortify，惯性与 vue。我必须添加基于角色的权限（就像 spatie 权限包一样）。我对于强化和惯性还是一个初学者。但我有 spatie 包的经验。我对如何添加角色和权限进行强化感到困惑。目前我计划创建像 spatie 包 has 这样的表结构（角色、权限、roles_has_permissions 等）。是否有每个构建包或更好的方法来实现角色和权限？并在 vue 文件中使用“@can”？谢谢。

编辑

大家好，这是我目前所做的（我现在正在使用这个）。它正在工作，但仍需要一些改进，（任何更好的解决方案我真的很感激）

1）照常安装和配置 spatie/laravel-permission

2）使用seeder向表添加预定义的权限和角色

3. 在用户模型中创建函数来获取权限数组列表

   // user model function
   public function getPermissionArray()
    {
        return $this->getAllPermissions()->mapWithKeys(function($pr){
            return [$pr['name'] => true];
        });
   
    }
   

   Run Code Online (Sandbox Code Playgroud)

4. 并将该功能添加到惯性中间件中

// user model function
public function getPermissionArray()
 {
     return $this->getAllPermissions()->mapWithKeys(function($pr){
         return [$pr['name'] => true];
     });

 }

现在$page.props.auth.can可以全球访问

5. 在vue文件中添加权限检查

   <div class="row">
              <div class="col-sm-12 col-md-6" v-if="$page.props.auth.can['user_create']">
                <inertia-link
                  class="btn btn-primary"
                  :href="$route('admin.user.create')"
                  >Create New
                </inertia-link>
              </div>
   </div>

我在 Laravel 8 中使用 Inertia JS，并向服务器发出以下 POST 请求。问题是浏览器 URL 也会通过 POST 请求进行更新，这在某些情况下可能是预期行为，但我想在浏览器中保留实际的 GET 请求，尽管使用多个 Laravel 路由向服务器发送不同类型的请求。

this.$inertia.put(`/task/${task_id}`, {order, category_id});

this.$inertia.visit(`/task/${task_id}`, {
    method: 'put',
    data: {order, category_id},
    only: ['categories', 'msg'],
    replace: true,
    preserveState: true,
    preserveScroll: true,
});
                

有人知道如何在使用 Inertia JS 向服务器发送 POST 请求的同时保留浏览器中现有的 GET URL 吗？

我正在尝试在我的 laravel 应用程序中使用惯性。我的应用程序不需要 jetstream，所以我不会使用它。所以我去了惯性网站https://inertiajs.com/来安装它，但我不确定我是否正确地安装了它。

我的页面上出现的错误是

查看[应用程序]未找到。

这就是我的 ProductController 中的内容

public function index()
{
    return Inertia::render('components/products/Index');
}

这是我的 Index.vue

<template>
    <div>
        <h1>Welcome</h1>
        <p>Hello, welcome to your first Inertia app!</p>
    </div>
</template>

<script>
    export default {
        components: {

        },
        props: {

        },
    }
</script>

在我的 app.blade.php 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Admin</title>

    <link rel="stylesheet" href="/vendor/adminlte/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css">

</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar …

我一直在尝试解决仅在生产中发生的错误。当我尝试create新的数据库条目时，会引发以下错误：

Mixed Content: The page at 'https://strong-moebel.art/admin/gallerie/neu' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://strong-moebel.art/admin/gallerie'. This request has been blocked; the content must be served over HTTPS.

Uncaught (in promise) Error: Network Error
    at wh (main.750d1ea1.js:4:96980)
    at s.onerror (main.750d1ea1.js:5:1837)

其他一切都有效，包括edit条目的方法。我正在使用一个resource controller. create方法使用惯性form.post，edit方法使用其form.put（如果相关的话）。

我一直在尝试使用以下提供的解决方案来调试此问题：

1. 混合内容问题 - 内容必须以 HTTPS 形式提供
2. 混合内容（laravel）

基本上人们都说要添加：

if (App::environment('production')) {
    URL::forceScheme('https');
}

按照boot()你的方法AppServiceProvider.php。我已经这样做了，但错误仍然出现。我想知道这是否是一个惯性问题。

在服务器上，我尝试过：

APP_ENV=production
APP_URL=http://localhost
APP_URL=https://localhost …

我是 Laravel 的中级。我在 Laravel 中为我的客户发布了一些项目。

我使用 Inertia 与Laravel 和 Vue启动了一个项目。我使用了 Laravel 10 的入门工具包以及 Breeze 和 vue。当我设置项目并配置各种内容时，我浏览了Laravel 10 通过 artisan 命令发布的lang目录。