}> } /> <SideBar /> <Routes> <Route path='/' element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route path='/service' element={<Service />} /> </Route> </Routes> <Article /> </div> 我不想在服务组件中渲染文章组件。我怎么做？请帮助我。 Article组件无条件在路由内容下渲染。 <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Article /> // <-- always rendered! </div> 简单的解决方案就是从 JSX 中删除 Article： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> {/* <Article /> removed */} </div> 但这可能不是您真正想要的。另一种选择是有条件地在路线上渲染它。 示例： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Route path='article' element={<Article /> } /> // <-- only on "/article" path </div>
React中react-router-dom最新版本如何实现延迟加载
我想使用Typescript在React中实现延迟加载。我收到打字稿错误。 常量应用程序 = () => { 返回 （ 我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>
目前，我在实现React Router v6（使用6.3.0）时遇到问题 假设我有如下所示的路由 const ParticipantRoutes = () => ( 目前，我在实现React Router v6（使用6.3.0）时遇到问题 假设我有如下所示的路由 const ParticipantRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Participant />} /> <Route path="new" element={<ParticipantUpdate />} /> <Route path=":id"> <Route index element={<ParticipantDetail />} /> <Route path=":id"> <Route path="edit-invoice" element={<InvoiceUpdate />}/> </Route> <Route path="invoice" element={<ParticipantInvoiceUpdate />} /> <Route path="edit" element={<ParticipantUpdate />} /> <Route path="delete" element={<ParticipantDeleteDialog />} /> </Route> </ErrorBoundaryRoutes> ); 还有另一条路线，比如 const InvoiceRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Invoice />} /> <Route path=":id"> <Route index element={<InvoiceDetail />} /> <Route path="delete" element={<InvoiceDeleteDialog />} /> <Route path="payment" element={<InvoicePaidDialog />} /> </Route> </ErrorBoundaryRoutes> ); 当我访问 URL 上定义的 ParticipantInvoiceUpdate 时，问题就出现了，比如 .../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 此页面具有向某些服务提交一些数据的行为，当接受服务器的响应时，我使用导航功能导航回 ParticipantDetail 元素。 navigate('/participant/${*some-guid-participant*}'); 但它不起作用，我尝试了一些东西，但似乎它只能导航到没有给出任何参数的元素。类似的东西 navigate('/participant'); 或 navigate('/invoice); 我也尝试过使用 generatePath 功能并将其与导航结合起来，但仍然没有成功 navigate(generatePath('/participant/:id',{id: participantId}), {replace:true}); 请帮助了解我是否遗漏了什么或误解了这个概念。 根据您的代码，路线：.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 指组件 InvoiceUpdate 而不是 ParticipantInvoiceUpdate 此外，使用字符串格式时不要忘记将 ' 更改为 ` : navigate(`/participant/${some-guid-participant}`);
Quasar Vue Router 解析名为route的href
我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路： ”/”， 组件：() => import("layouts/MainLayout.vue")...
从 Angular 16 转换为 Angular 17 后缺少 SSR 支持
我已将我的项目从 Angular 16 升级到 Angular 17。但是，我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后，Angular 是否提供 SSR 支持...
ASP.NET Core razor 页面 - 使用 asp-route-
我已经为我的 asp.net core 项目 (.NET 8) 实现了基于路由的本地化。基本上满足这些要求： 当请求根（path = '/'）时，CultureInfo.CurrentCulture 是...
Angular CLI 版本与 Angular Core 版本之间的兼容性？
有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本？他们完全独立吗？ 使用 Core v5.2.8 开发现有的 Angular 应用程序...
使用 InertiaJs 和 Laravel 从数据库中删除用户
我在从数据库中删除记录时遇到问题。我正在使用 InertiaJS 和 Laravel。 组件代码 以下是链接/按钮代码： 我在从数据库中删除记录时遇到问题。我正在使用 InertiaJS 和 Laravel。 组件代码 以下是链接/按钮代码： <Link class="trash" @click="submit(result.ChildID)"> Move to Trash </Link> 注意： ChildID 是数据库中子记录的 id。 现在：当用户单击此链接时，将调用一个方法，如下所示。 methods: { submit: function (ChildID) { alert(ChildID) if (confirm("Are you sure you want to delete this child?")) { this.$inertia.delete('destroy/ChildID'); } }, }, 路线代码 Route::delete('destroy/{childID}',[childrenController::class,'destroy']); 控制器代码 public function destroy(children $childID){ $childID->delete(); return redirect()->route('View_Child_Profile'); } 现在，当我点击删除按钮时，我收到以下错误： 试试这个。我认为你犯了错误“this.$inertia.delete('destroy/ChildID');” methods: { submit: function (ChildID) { alert(ChildID) if (confirm("Are you sure you want to delete this child?")) { this.$inertia.delete(`destroy/${ChildID}`); // or this.$inertia.delete('destroy/'+ChildID); } }, }, 这是我处理删除过程的方式。 前视+惯性： import { Link } from '@inertiajs/inertia-vue3'; 在模板中： <Link method="delete" :href="route('admin.insta_feeds.destroy',id)">Delete</Link> 后端 Laravel： 路线： Route::resource('insta_feeds', InstaFeedsController::class); 控制器功能： public function destroy(InstaFeed $insta_feed) { if(isset($insta_feed->image_path)){ Storage::delete($insta_feed->image_path); } $insta_feed->delete(); return Redirect::route('admin.insta_feeds.index'); }
安装 Angular CLI 时出现 Npm Angular 警告
当我尝试通过以下方式安装 CLI 时收到 npm 警告： npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]：此模块...
我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗？ 提前致谢 我使用 npm i ng-
有没有一种方法可以在React中单击时嵌入链接来重定向组件？
我有一个导航栏，其路线设置如下： 导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }
反应问题，当我将标头组件添加到我的主页组件时，没有任何内容加载
从“react”导入React； 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航； 导入首页
Angular Material v17：缺少“MatFormFieldAppearance”中的“遗产”
在 Angular Material v14 中，MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而，在 Angular
由于某种原因，自从从 Angular 13 升级到 Angular 15 后，当我输入： ng g c 某些组件 Angular 复制组件，创建重复文件。这种情况 100% 都会发生。第二次...
我的托管商中有一个工作域，我想在 AWS amplify 中部署 React 应用程序，所以我不想将整个域指向 AWS，而是想从托管中指向像 app.domain.com 这样的子域...
我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此，我通常创建这样的 Angular 服务： 导入 { 管理组件 }
angular-2-dropdown-multiselect - 自定义宽度 100%
我正在实现这个 angular-2-dropdown-multiselect 组件： https://www.npmjs.com/package/angular-2-dropdown-multiselect 该组件工作正常，但我需要将其设置为适合续...
我的 Angular 项目有问题。我有一个项目结构：应用程序结构。在我的 app.module.ts 中，代码如下： 从'@angular/core'导入{NgModule}； 从'@
Angular 项目不适用于@babylonjs/viewer
我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...
使用模块联盟进行 Angular 升级 - “集合没有原理图。”
我正在将一组 Angular 应用程序从 v12 升级到 v16，它们使用模块联合和 Angular Architects 的模块联合插件。 成功升级每个应用程序的 Angular 版本后...
Node Sass 版本 9.0.0 与 ^4.0.0 不兼容
我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误（./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...
我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时
登录后，使用 angular-oauth2-oidc 时，hasValidAccessToken 始终为 true
我已经使用 Angular 12.2 实现了 angular-oauth-oidc （版本 12.1.0）。我使用 Keycloak 作为 SSO 登录没有问题，但我在库中遇到了奇怪的行为。 每次，之后...
通过Angular到Springboot访问POST失败但GET成功，Postman适用于GET和POST
我正在使用示例 Angular 应用程序来测试 Okta 与 springboot 应用程序的集成。 前端示例：https://github.com/okta-samples/okta-angular-sample 我有一个带有
当我尝试在 Angular 17 应用程序中添加软件包时，它无法安装该软件包。它总是显示下面给出的错误。 ng 添加@angular/fire 跳过安装：软件包已安装 更新
类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误
我是一名初学者 Angular 开发人员，我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...
Angular 在其文档中声明，它与所有主要浏览器的 2 个最新版本（以及 Firefox 的最新+ESR）兼容。由于 Angular 在底层使用标准 DOM API，因此它应该...
为什么 Angular 2 或 Angular 4 使用香蕉括号？有什么具体原因吗？为什么它们不遵循与 Angular 1 相同的模式？
我知道，它与任何编码无关，但它们可以遵循与 AngularJS 中相同的语法 有角度...
Angular Material 17 独立组件中没有 DateAdapter 的提供者
我有一个带有 Angular 17 应用程序的 nx 项目，并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError：没有 DateAdapter 的提供者！ 错误。组件...
应用程序无法识别手势，例如在 Angular 11 中使用 Hammer.JS 进行平移
我无法在使用 Hammer.JS 的 Angular 应用程序中识别任何手势，例如滑动、平移。它的设置是这样的： 包.json： “@角度/核心”：“11.0.5”， “@Angular/platform-br...
我按照这个例子来实现角度材料表。 https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts 在这里，我使用...
我创建了这个名为country-flag-dropdown.ts和html的组件 成分： 从“@angular/core”导入{Component、OnInit、Input、Output、EventEmitter}； 导入 {FormGroup, FormControl} ...
全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误
为什么我的应用程序根目录在 Angular 中不是 100% 高度？
这是我的第一个 Angular 项目，我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%，但应用程序根标签始终是可能的最小高度 当你...
如何配置 Angular 17 开发服务器将 HTTP 重定向到 HTTPS？
我已将 Angular 开发服务器配置为成功使用带有 SSL 的 HTTPS： “端口”：4200， “ssl”：正确， "sslKey": "./tools/.ssl/localhost+2-key.pem", “SSL...
我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001：“mat-icon”不是已知元素
我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 版本上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。
我创建了一个“自定义”主题（使用 https://material.angular.io/guide/theming 上的主题文档，这非常糟糕），如下所示： @import '~@angular/material/theming'; @包括 mat-cor...
Angular 17：fileReplacements 不替换文件
我有一个 C#/Angular 17 SPA 项目，在具有多个部署槽的 Azure 应用服务上的 Docker 容器中运行。基本上，生产槽加载标记为“latest-prod”的图像......
我有两个组件：主页组件和产品列表组件。 这是我的 home.component.ts： 从 '@angular/core' 导入 { Component } ； 从“@angular/core”导入{NgModule}； 导入{产品...
Angular 12：Firebase 模块未正确提供（？）
第一次使用Firebase，所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置，所以我的 AppModule 中的内容是： @NgModule({ 声明：[
在 Angular 应用程序中调整画布元素大小时如何解决闪烁问题
我有一个带有画布的 Angular 组件，如下所示： 在 .ts 文件中，我设置了一个变量来访问...
我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ 首页.html 进入React页面 应用程序.js 我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ home.html <button>go to React page</button> 应用程序.js <BrowserRouter> <Routes> <Route path="/mypage" element={<Mypage />}> </Routes> </BrowserRouter> 我想点击“转到React页面”按钮，我可以导航到"/mypage"？ 该按钮应实现对 "/mypage" URL 的导航操作，该 URL 最好为您的 React 应用程序提供服务。 home.html 更新按钮以包含重定向到子路线的点击处理程序 <button onclick="navigateToReactApp()">go to React page</button> const navigateToReactApp = () => { window.location.href = "/mypage"; // check the path correctness }; 或者使用锚标记，这在语义上可能更正确。 <a href="/mypage">go to React page</a> App.js 通过设置 "/mypage" 属性，更新路由器以使所有路由/链接/等从托管/服务应用程序的 basename relative 工作。 <BrowserRouter basename="/mypage"> <Routes> <Route path="/" element={<Mypage />}> </Routes> </BrowserRouter>
如何将 swiper 11.0.5 元素与 Angular 17 一起使用
在 Angular 17 中，一切都是独立组件，并且没有 app.module.ts 文件。那么，我们把这段代码放在哪里， 从“swiper/element”导入{register}； 登记（）; 我正在...
嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配
在 Nuxt 3 页面内，我通过从 pinia 存储调用操作来获取帖子数据： {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据： <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店： import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常，但我在浏览器控制台中收到以下错误： entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server: <!----> - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题？ 我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。 该组件仅在客户端渲染其插槽。
我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢你！ 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢！ app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置，但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗？ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。
我目前正在开发 Angular 前端。 我想使用由我正在合作的团队创建的组件，该组件用于在表单中创建输入文本。 该组件的 .html...
当element在element上使用迭代变量时如何重构ngFor？
我有这个 {{ dt }} 我想重构为 Angular v17
Laravel 购物车页面，表单内有一个表单，用于处理删除和提交数据更新数据库
我有一个购物车页面，表格内有一个表格，也许你可以建议我应该做什么？ 根据图片，我给出的蓝色圆圈是一个表格 我的刀片代码 我有一个购物车页面，表格内有一个表格，也许你可以建议我应该做什么？根据图片我给出的蓝色圆圈是一个表格我的刀片代码<table class="table"> <thead> <tr> <th scope="col">No</th> <th scope="col">Nama Barang</th> <th scope="col">Quantity</th> <th scope="col">Action</th> </tr> </thead> <tbody> @php $no = 1; @endphp @forelse ($permintaans as $b) <tr> <td>{{ $no ++ }}</td> <td> {{ $b->nama_kategori }} {{ $b->nama_atk }} </td> <td> <form action="{{ route('permintaan.update', $b->id) }}" method="POST" style="display: inline-block;"> @csrf @method('PUT') <div class="input-group input-group-sm mb-3"> <input type="number" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="satuan_permintaan" min="0" max={{ $b->stok }} required> <span class="input-group-text" id="inputGroup-sizing-sm">{{ $b->subsatuan_atk }}</span> </div> </td> <td> <form action="{{ route('permintaan.destroy', $b->id) }}" method="POST" style="display: inline-block;"> @csrf @method('DELETE') <button type="submit" class="btn custom2-btn"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="red" class="bi bi-trash" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/> </svg></button> </form> </td> </tr> @empty @endforelse </tbody> </table> 我的控制器public function store(Request $request) { $task = new Permintaan(); $task->atk_id = $request->input('atk_id'); $task->proses = 'Proses'; if (Permintaan::where('atk_id', $task->atk_id)->exists()){ return redirect('/atk/permintaan')->with(['info' => 'ATK Sudah Dalam Permintaan']); } else{ $task->save(); return redirect()->route('permintaan.index'); } } public function destroy($id) { $permintaan = Permintaan::find($id); $permintaan->delete(); return redirect()->route('permintaan.index'); } 我要处理删除并提交数据更新数据库 在开始销毁表单之前关闭更新表单第一个表单标签（缺少）。
Pinia 对象在 Vue 中的 foreach 后失去反应性
我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> €{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新，但随后我有了我的平衡项目组件： BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">€</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">€</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字，则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中，我执行“props.balanceItem.total = 500”。但如果我检查商店，它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单，但这对我来说似乎很老套，我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目，但这似乎也很棘手。谁知道为什么失去反应性？ 我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。 我像这样更新我的表格和商店： <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店： import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200，我的表单值可用于更新商店和更新表单。这是我能想到的最好的
我在 Angular 项目中面临一个问题，其中选项表单中有多个复选框。问题是有时复选框中的更改无法正确反映。这是相关内容...