large-language-model 相关问题

ASP.NET MVC 项目模板在移动设备上无法调整为 100%

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));

理解“？”的使用在 Dart 函数参数中（bool？）

在探索 Dart 的过程中，我在 Dart 语言之旅 (https://dart.dev/guides/language/language-tour#functions) 中遇到了以下代码片段： /// 设置 [bold] 和 [hidden] 标志 ...

如何从 default.master 获取其他内容页面的标题？

我的前文件夹有一个default.Master page和一些其他aspx文件，例如登录。默认.Master: <%@Master language="C#" CodeBehind="~/default.Master.cs" Inherits="Front.

无法运行flutter项目

我正在尝试让我的 flutter 项目运行。运行 main.dart 时，我收到此错误消息，我不明白。 Language 语言：Dart 不参与视图提供者 com.jetbr...

如何跳过 github 操作上的特定运行程序？

我有一个在自托管运行器上运行的 github 操作。我们有很多标签，如“xsmall”、“small”、“large”、“xlarge”等。所有这些标签都有一个共同的标签，如 devops。所以在很多g...

将带有 llm-math 的 Agent 添加到 LangChain Expressive Language 实现中

我有这个 LCEL 解决方案：从 langchain.document_loaders.pdf 导入 PyMuPDFLoader 导入操作系统从输入导入列表，元组从 dotenv 导入 load_dotenv 从 langchain.prompts.prompt 导入

OSError：在目录中找不到名为 model.safetensors 的文件时出错

我正在尝试加载以 Hugging Face 安全张量格式保存的 LLAMA2 模型。模型保存在两部分 model-part1.safetensors 和 model-part2.safetensors 中。我正在使用 LlamaForCausalLM。

.Net core Web API 将 json/model 值设置为 NULL

我有一个 .Net core Web API，它接受以下 JSON：（RequestModel） { “isSpecimen”：正确， “形式”： { “网络”：{ “abc1...

Django UserCreationForm 元字段

我创建了自定义的用户创建表单类RegisterForm（用户创建表单）：类元： model = Users #personal 用户模型字段 = ( “用户名”， ...

如何决定torchsummary.summary(model=model.policy, input_size=(int, int, int))的'input_size'参数？

这是我的 CNN 网络，由“print(model.policy)”打印： CNN政策( （演员）：演员（ (features_extractor): CustomCNN( (cnn): 顺序( (0): Conv2d(1, 32, kernel_size=(3, 3), st...

如何在VUE中使用参数访问v-model值

我想使用参数访问 v-model 值，我尝试下面的代码我想使用参数访问 v-model 值，我尝试下面的代码 <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click="submitTest(item)"> testbtn </button> </div> </template> <script setup> var data = {'test1': 'val1', 'test2': 'val2'} function submitTest(itemParam){ alert(itemParam.value) } </script> 实际上在submitTest函数（警报行）中，它不访问输入标签v-model，而是访问itemParam（字符串值本身）值。我想要的是使用由项目参数传递的参数访问输入“项目值”。我尝试了上面的代码，结果，它实际上访问了“itemParam”字符串值本身，而不是传递参数。在Vue.js中，您应该使用v-model进行双向数据绑定。 v-model 指令是绑定数据以形成输入并更新用户输入数据的便捷简写。但是，它不能直接用作 prop 或作为参数传递。相反，您可以传递整个对象并在方法中使用它。以下是修改代码的方法： <template> <div v-for="(item, idx) in data" :key="idx"> <input :id="item" v-model="item.value"></input> <button @click="submitTest(item)">testbtn</button> </div> </template> <script setup> const data = ref([ { id: 'input1', value: '' }, { id: 'input2', value: '' }, // ... other items ]); function submitTest(item) { alert(item.value); } </script> 在此示例中，数据数组中的每个项目都是一个具有 id 和 value 属性的对象。 v-model 指令绑定到 item.value。当您单击按钮时，将使用整个项目对象调用 SubmitTest 函数，您可以从那里访问 value 属性。确保在设置脚本中使用 ref 创建对数据数组的反应性引用。注意： :key="idx" 添加到中，为循环中的每个项目提供唯一的键。这有助于 Vue.js 在数组更改时高效更新和重新渲染组件。

XSL/XSLT - 动态获取父节点及其值

有人可以帮助我吗？我有一个 xml，可以在其中获取节点中节点的名称，例如值、宽度、高度、重量…… 例子：有人可以帮助我吗？我有一个 xml，可以在其中获取节点中节点的名称，例如值、宽度、高度、重量…… 示例： <?xml version="1.0" encoding="utf-8"?> <Data totalExecutionTime="00:00:00.0076034" totalCount="1"> <Features> <ProductID id="100" language="NLB" caption="Product ID" captionAlternative="Product ID" unit="" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="" viewGroup="" viewGroupOrder="0" topViewGroupId="b65b432a-1bf1-4fd4-ae92-03418d3204be" topViewGroup="Algemeen" topViewGroupOrder="1" viewOrder="0" form="Complex" dataType="String" readOnly="False" /> <Length id="245" language="NLB" caption="Lengte" captionAlternative="Lengte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="1" form="Simple" dataType="Number" readOnly="False" /> <Width id="242" language="NLB" caption="Breedte" captionAlternative="Breedte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="2" form="Simple" dataType="Number" readOnly="False" /> <Height id="244" language="NLB" caption="Hoogte" captionAlternative="Hoogte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="3" form="Simple" dataType="Number" readOnly="False" /> <Depth id="771" language="NLB" caption="Diepte" captionAlternative="Diepte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="4" form="Simple" dataType="Number" readOnly="False" /> <Weight id="243" language="NLB" caption="Gewicht" captionAlternative="Gewicht" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="5" form="Simple" dataType="Number" readOnly="False" /> <LoadCapacity id="457" language="NLB" caption="Draagvermogen" captionAlternative="Draagvermogen" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="6" form="Simple" dataType="Number" readOnly="False" /> <Volume id="435" language="NLB" caption="Inhoud" captionAlternative="Inhoud" unit="l" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="bfaf678b-8b9d-4cea-aa99-08edd8316dc7" viewGroup="Algemene specificaties" viewGroupOrder="13" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="7" form="Simple" dataType="Number" readOnly="False" /> <TireSize id="705" language="NLB" caption="Banden maat" captionAlternative="Banden maat" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="8" form="Simple" dataType="String" readOnly="False" /> <LoadingScoop id="706" language="NLB" caption="Laadschep" captionAlternative="Laadschep" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="9" form="Simple" dataType="String" readOnly="False" /> </Features> <ProductID id="25137" parentId="0" brand="Normal" order="0" createdDate="2020-03-24T15:30:07.21" modifiedDate="2023-11-20T20:01:33.87"> <Value seq="0" modifiedDate="2020-03-24T15:30:10.493">111TA5851</Value> <Width seq="0" modifiedDate="2020-03-24T15:30:10.493">515</Width> <Height seq="0" modifiedDate="2020-03-24T15:30:10.493">1100</Height> <Weight seq="0" modifiedDate="2020-04-02T13:18:09.44">7.7</Weight> <LoadCapacity seq="0" modifiedDate="2020-03-24T15:30:10.493">150</LoadCapacity> <LoadingScoop seq="0" modifiedDate="2020-03-24T15:30:10.493">350x170</LoadingScoop> </ProductID> </Data> 我想要的是动态获取对应父节点的值。我可以获得如下节点名称： <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table> <xsl:for-each select="/Data/ProductID/*"> <xsl:variable name="myVariable" select="name(.)"/> <xsl:variable name="HasValue" select="count(/Data/ProductID/*)" /> <tr> <td><xsl:value-of select="name(.)" /></td> <td><xsl:value-of select="local-name()" /></td> <td><xsl:value-of select="name()" /></td> <td><xsl:value-of select="/Data/node($myVariable)/@unit" /></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> 但我不知道如何获取响应的父节点及其值，例如单位元素。提前致谢并致以诚挚的问候我已经尝试过但没用。我会不断收到错误：解析 '' 期间出现意外的标记 '$myVariable'。我想你想声明一把钥匙 <xsl:key name="element-key" match="Data/Features" use="name()"/> 然后你想使用例如key('element-name', name())/@unit。

使用 Whisper AI 转录时出现打字错误

我想使用 Whisper AI 转录音频文件。我从一篇文章中学到了https://www.assembleai.com/blog/how-to-run-openais-whisper-speech-recognition-model/ 使用 python 版本 3.8....

将多个对象添加到另一个对象

我一直在开发本教程中制作的应用程序版本（https://learn.microsoft.com/pl-pl/aspnet/core/data/ef-rp/complex-data-model?view =aspnetcore-5.0&tabs=visual-studio）。我有

Autodesk Model Derivative API：使用 exportSettingsName 选项将 Revit 转换为 IFC 不会在 2023 文件中创建 PSET

我正在使用模型衍生 API 将 Revit 文件 (.rvt) 转换为 IFC (.ifc) 文件。我正在设置属性，如

动态获取父节点及其值

我有一个xml，我可以在其中获取节点中节点的名称，例如值、宽度、高度、重量... 例子：我有一个 xml，可以在其中获取节点中节点的名称，例如值、宽度、高度、重量…… 示例： <?xml version="1.0" encoding="utf-8"?> <Data totalExecutionTime="00:00:00.0076034" totalCount="1"> <Features> <ProductID id="100" language="NLB" caption="Product ID" captionAlternative="Product ID" unit="" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="" viewGroup="" viewGroupOrder="0" topViewGroupId="b65b432a-1bf1-4fd4-ae92-03418d3204be" topViewGroup="Algemeen" topViewGroupOrder="1" viewOrder="0" form="Complex" dataType="String" readOnly="False" /> <Length id="245" language="NLB" caption="Lengte" captionAlternative="Lengte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="1" form="Simple" dataType="Number" readOnly="False" /> <Width id="242" language="NLB" caption="Breedte" captionAlternative="Breedte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="2" form="Simple" dataType="Number" readOnly="False" /> <Height id="244" language="NLB" caption="Hoogte" captionAlternative="Hoogte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="3" form="Simple" dataType="Number" readOnly="False" /> <Depth id="771" language="NLB" caption="Diepte" captionAlternative="Diepte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="4" form="Simple" dataType="Number" readOnly="False" /> <Weight id="243" language="NLB" caption="Gewicht" captionAlternative="Gewicht" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="5" form="Simple" dataType="Number" readOnly="False" /> <LoadCapacity id="457" language="NLB" caption="Draagvermogen" captionAlternative="Draagvermogen" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="6" form="Simple" dataType="Number" readOnly="False" /> <Volume id="435" language="NLB" caption="Inhoud" captionAlternative="Inhoud" unit="l" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="bfaf678b-8b9d-4cea-aa99-08edd8316dc7" viewGroup="Algemene specificaties" viewGroupOrder="13" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="7" form="Simple" dataType="Number" readOnly="False" /> <TireSize id="705" language="NLB" caption="Banden maat" captionAlternative="Banden maat" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="8" form="Simple" dataType="String" readOnly="False" /> <LoadingScoop id="706" language="NLB" caption="Laadschep" captionAlternative="Laadschep" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="9" form="Simple" dataType="String" readOnly="False" /> </Features> <ProductID id="25137" parentId="0" brand="Normal" order="0" createdDate="2020-03-24T15:30:07.21" modifiedDate="2023-11-20T20:01:33.87"> <Value seq="0" modifiedDate="2020-03-24T15:30:10.493">111TA5851</Value> <Width seq="0" modifiedDate="2020-03-24T15:30:10.493">515</Width> <Height seq="0" modifiedDate="2020-03-24T15:30:10.493">1100</Height> <Weight seq="0" modifiedDate="2020-04-02T13:18:09.44">7.7</Weight> <LoadCapacity seq="0" modifiedDate="2020-03-24T15:30:10.493">150</LoadCapacity> <LoadingScoop seq="0" modifiedDate="2020-03-24T15:30:10.493">350x170</LoadingScoop> </ProductID> </Data> 我想要的是动态获取对应父节点的hte值。我可以获得如下节点名称： <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table> <xsl:for-each select="/Data/ProductID/*"> <xsl:variable name="myVariable" select="name(.)"/> <xsl:variable name="HasValue" select="count(/Data/ProductID/*)" /> <tr> <td><xsl:value-of select="name(.)" /></td> <td><xsl:value-of select="local-name()" /></td> <td><xsl:value-of select="name()" /></td> <td><xsl:value-of select="/Data/node($myVariable)/@unit" /></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> 但是我不知道如何获取相应的父节点及其值，例如单位元素。我已经尝试过<xsl:value-of select="/Data/$myVariable/@unit" /></td>，但不起作用。我会不断收到错误：Unexpected token '$myVariable' during parsing of '<AnyKindTest>'。我想你想声明一把钥匙 <xsl:key name="element-key" match="Data/Features" use="name()"/> 然后你想使用例如key('element-key', name())/@unit。你写道： <xsl:value-of select="/Data/$myVariable/@unit" /> 我认为你的问题可能是重复的使用 2 个参数进行 xslt 测试您正在尝试使用 $myVariable，就好像它所保存的字符串可以以文本方式替换到您的 XPath 表达式中一样。您可能想要的是 /Data/*[name()=$myVariable]/@unit 很多人都犯过这个错误，但我不知道为什么。我不认为人们会将变量 $op 设置为“+”或“-”，然后期望 @x $op @y 执行适当的加法或减法。除非他们以前的编程经验完全是用宏语言。

Laravel 动态扩展或使用 Traits

可以在运行时扩展或使用不同的类吗？例子：假设我们有一个名为 Player 的模型（我们的 A 模型）可以在运行时扩展或使用不同的类吗？示例：假设我们有一个 model 称为 Player（我们的 A 模型） <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Player extends Model{ } 我们还有另外 2 个型号（B 和 C 型号） <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; protected $connection= 'db_b'; class PlayerInfoB extends Model{ function getName(){ return $this->name; } } 我们的C型号 <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; protected $connection= 'db_c'; class PlayerInfoC extends Model{ function getName(){ return $this->name_g; } } 模型A (Player)如何在运行时根据配置或其他数据扩展Model B or C 为什么我需要这个。我有 2 个或更多不同的表，这些表的列有不同的名称，例如： Table 1 - name Table 2 - name_g Table 3 - name_full 所以我需要一个可以随时调用的包装器getName()，而无需检查现在使用的表。 $player = Player::get(); echo $player->getName(); 如果有不清楚的地方，请评论，我会更新我的问题。更新基于madalin-ivascu答案可以这样完成吗？ class Player extends Model{ protected $model; public function __construct(){ $this->setModel(); parent::__construct(); } protected function setModel(){ $this->model = $this->column_model_name } function getAttributeName(){ return $this->model->getName(); } } 如果不使用 eval 或 dirty hacks，就不可能在运行时编写一个类。您必须重新考虑您的类设计，因为您不太可能需要通过良好的设计来做到这一点。您可以做的是使用方法 setTable 和 on: 在运行时更改模型实例上的表和数据库连接 Player::on('db_b')->setTable('player_info_b')->find($id); 另一种方法（首选）是定义模型 PlayerInfoC 和 PlayerInfoB 来扩展您的 Player 模型，然后根据您的情况在需要时实例化类 B 或 C。在您的代码中，您的脚本必须具有您检查的状态，以便知道何时使用正确的模型？既然如此，为什么不在 get name 中使用参数呢？ class Player extends Model{ function getName($field){ return isset($this->{$field}) ? $this->{$field} : null; } } 如果你经常这样做，那么使用魔法方法： class Player extends Model{ function __get($key){ return isset($this->{$field}) ? $this->{$field} : null; } } ... echo $myModelInstance->{$field}; http://php.net/manual/en/language.oop5.overloading.php#object.get 在 Laravel 中，当你通过集合方法拉回数据时，它无论如何都会执行这个神奇的方法，因为所有属性都存储在称为属性的嵌套对象中，因此 __set() 和 __get() 看起来像这样： function __get($key){ return isset($this->attributes->{$key}) ? $this->attributes->{$key} : null; } function __set($key, $value){ return $this->attributes->{$key} = $value; } 建议后者带有属性子集，这样可以防止数据与返回的数据库列名称与模型中已使用的名称发生冲突。这样，您只需在创建的每个模型中将一个属性名称作为保留名称进行管理，而不必担心您使用的数百个 var 名称会覆盖模型或模型扩展中的另一个属性名称。使用该模型值来调用函数 $player = Player::get(); echo Player::getName($player->id,'PlayerInfoC'); 在 Player 模型中您只需调用 public static function getName($id,$class) return $class::where('player_id',$id)->getName();//each class will have the function } ps：您需要进行一些验证来测试该名称是否存在另一种选择是在模型之间创建关系您可以在模型中使用与以下相同的启动方法来执行此操作： protected static function booted() { if (<--your condition-- >) { $traitInitializers[static::class][] = 'boot' . ExampleTrait::class; $traitInitializers[static::class][] = 'boot' . Organizations::class; } }

无法为版本化模型创建捆绑包文件夹？

我收到了其他开发商的项目。然后我在 Xcode 中打开 iOS 项目并构建它，我收到如下错误：卷/Macintosh D/我的工作区/HCProject/Model/HealthCareModel.xcdatamodeld:0: 错误...

如何使用 vitest 和 vue-test-utils 测试 Vuetify 3 select？

我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。 <v-select clearable :items="models" item-value="id" item-text="name" ref="model-select" required="true" v-model="selectedModel" ></v-select> 我尝试用我在here找到的两种方法来测试它。带注释的代码是一种方法，未注释的代码是第二种方法。 test('it fills the form', async () => { models = [ { id: '1', name: 'foo', }, { id: '2', name: 'bar', }, ]; await nextTick(); // const select = wrapper?.findComponent({ref: 'model-select'}); // expect(select?.exists()).toBeTruthy(); // select?.vm.selectItem('foo'); // await nextTick(); wrapper?.find('[data-testid="model-select"]').trigger('click'); await nextTick(); wrapper?.find('.menuable__content__active')?.findAll('.v-list-item')?.at(0)?.trigger('click'); await nextTick(); }); 我似乎找不到正确的解决方案，DOM 包装器要么不知道选择项目的方法（第一种方法），要么是空的，因为它找不到 vuetify 选择菜单（第二种方法）有人遇到同样的问题并找到适合我使用的软件包的解决方案吗？我找到了答案。您无法访问底层 html 的值，而是访问组件实例并获取值 import { mount } from '@vue/test-utils' describe('my test', () => { wrapper = mount(MySelect) test('it fills the form', async () => { models = [ { id: '1', name: 'foo' },{ id: '2', name: 'bar',}, ]; const component = wrapper.findComponent('[data-testid="model-select"]') await component.setValue(models[0]) console.log('new value', component.vm.modelValue) }) 我花了几天时间尝试解决同样的错误。我希望我有所帮助。问候！

Vue：带有 v-model 的代理框架组件

我想要代理，它以可以与 Dayjs（我们在整个应用程序中使用）一起使用的方式公开基于日期的 v 模型。我怎样才能实现这个目标？我正在使用最新的 Vu...

为什么 .className = .... 不起作用，而 classList.add() 却起作用？

.youtube-文本{ 字体系列：Arial；字体大小：更大； } .订阅按钮{ 字体系列...</desc> <question vote="0"> <pre><code><!DOCTYPE html> <html> <head> <style> .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: 'Arial Narrow Bold'; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: 'Arial Narrow Bold'; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } </style> <title> </title> </head> <body> <p2>Youtube Subscribe Button</p2><br><Br> <button class = 'subscribe-button' onclick=" subscribeButton(); ">Subscribe</button> <script async> function subscribeButton() { const subButton = document.querySelector('.subscribe-button'); if (subButton.innerHTML === 'Subscribe'){ subButton.innerHTML = 'Subscribed'; subButton.classList.add('is-subscribed'); } else { subButton.innerHTML = 'Subscribe'; subButton.classList.remove('is-subscribed'); } } </script> </body> </html> </code></pre> <pre><code><!DOCTYPE html> <html> <head> <style> .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: 'Arial Narrow Bold'; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: 'Arial Narrow Bold'; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } </style> <title> </title> </head> <body> <p2>Youtube Subscribe Button</p2><br><Br> <button class = 'subscribe-button' onclick=" subscribeButton(); ">Subscribe</button> <script async> function subscribeButton() { const subButton = document.querySelector('.subscribe-button'); if (subButton.innerHTML === 'Subscribe'){ subButton.innerHTML = 'Subscribed'; subButton.className = 'is-subscribed'; } else { subButton.innerHTML = 'Subscribe'; subButton.className = 'subscribe-button'; } } </script> </body> </html> </code></pre> <p>你好，我刚刚开始使用 JS，想知道我遇到的这个问题。顶部的代码有效，底部的代码无效，第一次单击时，它确实将类更改为已订阅，但是当我按下按钮，它给出了一个错误，并且不再改变它，我只是想知道为什么会这样。</p> </question> <answer tick="false" vote="0"> <p>默认的 DOM elemnt 对象没有名为 <pre><code>className</code></pre> 的属性。将 classList 属性与 <pre><code>.add()</code></pre> 和 <pre><code>.remove()</code></pre> 方法结合使用。</p> </answer> <answer tick="false" vote="0"> <blockquote> <p>但是当我按下按钮时，它给出了一个错误并且不再改变它</p> </blockquote> <p>当您按下按钮时，代码会按类查找元素：</p> <pre><code>const subButton = document.querySelector('.subscribe-button'); </code></pre> <p>但是该类没有这样的元素。当您设置 <em><code>className</code></em> 时，您<pre>删除了</pre>该类：</p> <pre><code>subButton.className = 'is-subscribed'; </code></pre> <p>这<em>用</em><code>class</code><pre>替换了</pre>整个<pre><code>is-subscribed</code></pre>，而不是<em>添加</em>到类列表中。</p> </answer> </body></html>

VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。家长：从“vue”导入{ref}；导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。</p> <p>家长：</p> <pre><code><script setup> import { ref } from 'vue'; import TextInput from './TextInput.vue'; const size = ref(1); const color = ref('red'); </script> <template> <TextInput v-model:size="size" v-model:color.capitalize="color" /> <div :style="{ fontSize: size + 'em', color: color }">  <p>{{ size }} {{ color }}</p> </div> </template> </code></pre> <p>子：TextInput.vue</p> <pre><code><script setup> import { ref } from 'vue'; const size = defineModel('size'); const [color, modifier] = defineModel('color', { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); </script> <template> <input v-model="size"> <input v-model="color"> </template> </code></pre> <p>问题2：如果我在defineModel中省略“color”（“color”，{...，我会收到以下错误</p> <p>[Vue warn]：无关的非 props 属性（颜色、colorModifiers）被传递给组件但无法自动继承，因为组件渲染片段或文本根节点。</p> <pre><code>at <TextInput size=1 onUpdate:size=fn color="red" ... > at <ComponentVModel> at <App> </code></pre> <p>如果我只保留</p> <pre><code><input v-model="color"> </code></pre> <p>line，为了让它不是片段，根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1：在调用子元素中的 v-model setter 之前，<pre><code><p></code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器，因此父级中的 <pre><code><p></code></pre> 元素将显示初始值，在您的情况下为“红色”。</p> <p>问题 2：defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数，即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>

耶拿有没有办法看到OntClass来自导入的本体？

我有一个导入 bfo 的本体。在我的测试用例中，我只有一个类，它是实体的子类：我有一个导入bfo的本体。在我的测试用例中，我只有一个类，它是 entity: 的子类 <rdf:RDF xmlns="http://my.ontology/ontologyTest#" xml:base="http://my.ontology/ontologyTest" xmlns:da="http://my.ontology/ontologyTest#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:obo="http://purl.obolibrary.org/obo/" xmlns:owl="http://www.w3.org/2002/07/owl#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:terms="http://purl.org/dc/terms/"> <owl:Ontology rdf:about="http://my.ontology/ontologyTest"> <owl:imports rdf:resource="http://purl.obolibrary.org/obo/bfo/2019-08-26/bfo.owl"/> </owl:Ontology> <owl:Class rdf:about="http://my.ontology/ontologyTest#Event"> <rdfs:subClassOf rdf:resource="http://purl.obolibrary.org/obo/BFO_0000001"/> </owl:Class> </rdf:RDF> 当我打开本体时，我正在做： OntModel model = createModel("OWL_MEM"); FileManager.get().readModel(model, uri.toString()); Model _model = model.getRawModel(); model = new OntModelImpl(OntModelSpec.OWL_MEM, _model); ExtendedIterator classes = model.listClasses(); while (classes.hasNext()) { OntClass theOwlClass = (OntClass) classes.next(); if (thisClass.getNameSpace() == null && thisClass.getLocalName() == null) { continue; } ... } 我从我的本体中获取所有类（这里是Event），也从导入的本体中获取。 Jena 有没有办法知道 OntClass 是来自导入的本体并且未在我当前的本体中声明？正如 UninformedUser 的评论中所说，感谢他，您可以执行以下操作：列出所有导入本体的URI model.listImportedOntologyURIs() 列出导入本体的所有类model.getImportedModel(uri).listClasses() 在模型的所有类上创建一个迭代器，删除所有导入的类model.listClasses().filterDrop(importedClasses::contains) 因此，要打印模型的所有类而无需导入类： import java.util.HashSet; import java.util.Set; import org.apache.jena.ontology.OntClass; import org.apache.jena.ontology.OntModel; import org.apache.jena.ontology.OntModelSpec; import org.apache.jena.rdf.model.ModelFactory; import org.apache.jena.util.iterator.ExtendedIterator; OntModel model = ModelFactory.createOntologyModel(OntModelSpec.OWL_DL_MEM); model.read("file:///Users/von/tools/data.owl", "RDF/XML"); Set<OntClass> importedClasses = new HashSet<>(); for (String uri : model.listImportedOntologyURIs()) { importedClasses.addAll(model.getImportedModel(uri).listClasses().toSet()); } ExtendedIterator<OntClass> it = model.listClasses().filterDrop(importedClasses::contains); while (it.hasNext()) { OntClass cls = it.next(); System.out.println(cls); }

为什么我的目标激活对话框除了表格的第一行之外没有出现？

我正在使用 Vue 3 和 Vuetify 3。我正在尝试让我当前的应用程序显示中的一行我正在使用 Vue 3 和 Vuetify 3。我试图让我当前的应用程序在其自己的组件中的对话框中显示 <v-data-table 中的一行，但它无法正常工作：将出现对话框如果我单击表第一行的 Actions3 列中的删除图标，但不单击 Actions3 列中的任何其他删除按钮。这个游乐场说明了问题。一点背景信息，这个应用程序的初始版本只有一个删除按钮，即“操作”列中的按钮。它的工作是立即删除表中已按下删除按钮的行。这很有效，但有点危险，因为用户可能没有意识到这是一个删除按钮，并且可能对用它删除一行感到不满意，所以我添加了 Actions2 列，该列也为每行都有一个删除按钮。 Actions2 列中的按钮会显示一个对话框，其中显示该行的内容，并让用户选择确认删除或取消删除。这完全按照设计工作。但我对我使用的方法并不着迷，因为我必须为可组合项编写一个额外的模块来控制对话框的打开和关闭，所以我添加了 Actions3 按钮并编写它，以便它将使用目标激活显示该行内容并提供相同的两个按钮的对话框，一个用于确认删除，另一个用于取消删除。这就是麻烦所在。Actions3 列中的按钮仅显示表格第一行的对话框，因此这是我唯一可以删除的行。我需要为 Actions3 列中的每个删除按钮显示对话框，而不仅仅是第一个。重要提示：所有三列中实际删除行中数据的代码已被删除，因此按对话框中的任何红色垃圾桶或红色删除按钮都是完全安全的；不会丢失任何实际数据。如果我能让所有 Actions3 按钮正常工作，我计划从表中删除 Actions 和 Actions2 列。我希望你能帮忙。更新：我尝试按照莫里茨在评论中建议的方式进行编码，但显然我做错了，因为 ConfirmDelete2 列中的任何按钮都没有出现 Actions3 对话框。这是我修改后的playground，以防有人可以帮助我找出哪里出了问题。我建议使用该项目来触发对话框：激活器仅将 selectedItem 设置为当前项目（我会使用 VBtn 而不是 VIcon）： <v-btn icon="mdi-delete" variant="plain" @click="event => selectedItem = item" /> ConfirmDelete2 以一个 item 作为模型，其余的 props 被删除，因为数据可以直接通过 item 访问： // in ConfirmDelete2 setup type Item = {...} const model = defineModel<Item|null>() 无论何时设置模型，VDialog 都应该出现。由于对话框中使用了项目数据，因此使用 v-if 而不是 :modelValue="Boolean(model)" 可以避免 model is null 错误： <v-dialog v-if="model" :modelValue="true" ... 删除后，取消设置model以关闭模态框： const deleteRecord = () => { ... model.value = null // <--- defineModel emits `update:modelValue` } 现在父级可以简单地使用 v-model 来传递 selectedItem，当对话框关闭时它将被取消设置（由 v-model 更新） <ConfirmDelete2 v-model="selectedItem" /> 这里是更新后的游乐场。希望有帮助！如果有不清楚的地方请告诉我。

为什么 Odoo 17 没有在 <notebook> 中为我的字段渲染标签？

我正在运行有关 Odoo 17 开发的教程，并为第 7 章中的练习创建了以下代码：我正在运行有关 Odoo 17 开发的教程，并且我为第 7 章中的练习创建了此代码： <record id="estate_view_form" model="ir.ui.view"> <field name="name">estate.property.form</field> <field name="model">estate.property</field> <field name="arch" type="xml"> <form string="Estate Property" create="True"> <sheet> <group string="Info"> <field name="name" /> <field name="description" /> </group> <group string="Location"> <field name="postcode" /> </group> <notebook> <page string="Specs"> <field name="facades" /> <field name="garage" /> </page> </notebook> </sheet> </form> </field> </record> 它可以工作，但 <notebook> 中字段的标签未呈现。我尝试添加 string 属性，但这不起作用。 <notebook> 上的文档没有提及任何有关此行为的信息。 IIRC 自从我使用的每个版本（6.1+）以来，你必须在 group 周围有一个 field 才能自动获取标签。

如何取消点击Primevue的单选按钮？

我正在使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗？这是我的单选按钮代码。我使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗？这是我的单选按钮代码。 <div class="field col-12 md:col-12 lg:col-12"> <template v-for="currency in currencies" :key="currency.id"> <div v-if="v$.currency.$model !== currency.code" class="flex align-items-center mb-2"> <RadioButton v-model="paidInType" :inputId="currency.code" name="payIn" :value="currency.code" /> <label :for="currency.code" class="ml-2">Pay in {{ currency.symbol }}</label> </div> </template> </div> 单选按钮并不意味着不可选择。请针对您的用例使用复选框或切换组件，并根据您的需要重新设计它们。但是如果您确实需要覆盖默认的单选按钮操作，则添加 @click 方法来删除所选值（如果其等于单击的单选按钮值）。从 UI/UX 角度来看，您不应该将单选按钮留空。这就是为什么 PrimeVue 无线电组件没有 required 属性（只是假设需要）。这种行为已经成为几十年来的标准，即必须选择一个单选选项，即使该选项是“不适用”或“不想说”等。如果您确实需要取消选择，请首先考虑使用不同的组件。如果您确实想取消选择单选按钮，您需要做的就是在选择事件时将 v-model 设置回默认的未选择值状态。由于您需要首先确认新选择的值与之前的值相同，因此您需要始终跟踪之前的值。 const paidInType = ref(''); const prevValue = ref(''); function selectRadio(value) { if (prevValue.value === paidInType.value) { paidInType.value = ''; } } <RadioButton v-model="paidInType" @click="prevValue = paidInType" @update:modelValue="selectRadio(currency.code)" :inputId="currency.code" name="payIn" :value="currency.code" /> stackblitz 演示

AlpineJS 提交表单而不刷新页面

我正在 Magento 上使用 Hyva 主题和 AlpineJs，并使用和所需的输入将产品添加到购物车。这是表单代码的一部分：我正在 Magento 上使用 Hyva 主题和 AlpineJs，并使用 <form> 以及所需的输入将产品添加到购物车。这是表单代码的一部分： <form method="post" id="product_addtocart_form" > <input name="product" /> <input name="selected_configurable_option" /> <input name="related_product" /> <input name="item"> </form> 这是我用来提交表单的按钮： <button type="submit" form="product_addtocart_form"> Submit </button> 一切都很好。但是，我想添加一个模式，该模式在将产品添加到购物车后显示，但一旦添加产品，页面就会刷新。我发现了很多类似的主题，但没有任何对我有用。我已经尝试过使用 event.preventDefault() 和 onsubmit="return false"。两者都不会刷新页面，但不会添加产品。我还尝试使用 HTTP post 方法添加产品，这部分解决了问题，但是当涉及到添加具有可配置选项的产品时，它变得太复杂了。对于我可以采取的在提交表单后停止刷新页面的方法，您有什么建议或想法吗？尝试以下步骤：向表单添加 @submit.prevent 指令以阻止默认的表单提交行为。 ` <form method="post" id="product_addtocart_form" @submit.prevent="submitForm"> <input name="product" x-model="product" /> <input name="selected_configurable_option" x-model="selectedConfigurableOption" /> <input name="related_product" x-model="relatedProduct" /> <input name="item" x-model="item" /> <button type="submit" form="product_addtocart_form"> Submit </button> </form> ` 并且 `<div x-show="showModal" @click.away="showModal = false" style="display: none;"> <div class="modal-content"> Product successfully added to the cart! <button @click="showModal = false">Close</button> </div> </div> ` 使用Fetch API进行AJAX请求，向服务器发出AJAX请求将产品添加到购物车，处理服务器响应并显示如果产品添加成功，则为模态。 `function addToCart() { return { product: '', selectedConfigurableOption: '', relatedProduct: '', item: '', showModal: false, async submitForm() { const formData = new FormData(); formData.append('product', this.product); formData.append('selected_configurable_option', this.selectedConfigurableOption); formData.append('related_product', this.relatedProduct); formData.append('item', this.item); try { const response = await fetch('/path/to/your/add-to-cart/api', { method: 'POST', body: formData, headers: { 'Accept': 'application/json', }, }); if (response.ok) { const data = await response.json(); // Assuming the response contains a success flag or status if (data.success) { this.showModal = true; } else { // Handle error (e.g., show error message) console.error('Error adding product to cart:', data.message); } } else { console.error('Network response was not ok.'); } } catch (error) { console.error('Error:', error); } } }; }` 您可以使用 <div x-data="addToCart()"> 包裹整个模态框并使用 <form> 以便该功能正常工作。

引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS，选择器“progress-bar”已更改为“bar”： ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此，将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。不确定这种疯狂的原因是什么，似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？如果您使用 Bootstrap v4 并且需要动画，则需要使用 progress-bar-animated 而不是 active。

.NET MAUI：自定义Shell TitleView并绑定到当前页面标题

我想用我自己的自定义布局替换默认的 Shell 标头，如下所示：我想用我自己的自定义布局替换默认的 Shell 标头，如下所示： <?xml version="1.0" encoding="UTF-8" ?> <Shell x:Class="MyNamespace.App.AppShell" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyNamespace.App" xmlns:pages="clr-namespace:MyNamespace.App.Pages" BindingContext="{x:Static local:MainView.Instance}" Shell.FlyoutBehavior="{Binding ShellFlyoutType}" x:Name="shellMain"> <Shell.TitleView> <Grid ColumnDefinitions="*,200"> <Label BindingContext="{x:Reference shellMain}" Text="{Binding Path=CurrentPage.Title, Mode=OneWay}" FontSize="Large" TextColor="White" /> <ActivityIndicator IsRunning="{Binding IsBusy}" Color="Orange" Grid.Column="1" HorizontalOptions="End" /> </Grid> </Shell.TitleView> <ShellContent Title=" Login" ContentTemplate="{DataTemplate local:MainPage}" Route="login" FlyoutItemIsVisible="False" /> <ShellContent Title="Dashboard" ContentTemplate="{DataTemplate pages:DashboardPage}" Route="dashboard" /> </Shell> 我无法绑定当前页面标题。我的 AppShell.xaml Shell 声明如下 <Shell ... x:Name="shellMain"> 作为替代方案，您可以在 OnNaviged 方法中设置 titleview ：在 AppShell.xaml 中，定义标签的名称 <Shell.TitleView> <Grid ColumnDefinitions="*,200"> <Label BindingContext="{x:Reference shellMain}" x:Name="mylabel" FontSize="Large" TextColor="White" /> <ActivityIndicator IsRunning="{Binding IsBusy}" Color="Orange" Grid.Column="1" HorizontalOptions="End" /> </Grid> </Shell.TitleView> 在AppShell.xaml.cs中，重写OnNaviged方法，获取当前项目 protected override void OnNavigated(ShellNavigatedEventArgs args) { base.OnNavigated(args); var shellItem = Shell.Current?.CurrentItem; string title = shellItem?.Title; int iterationCount = 0; while (shellItem != null && title == null) { title = shellItem.Title; shellItem = shellItem.CurrentItem; if (iterationCount > 10) break; // max nesting reached iterationCount++; } myLabel.Text = title; } 希望它对你有用。我正在尝试同样的方法来修改 TitleView 的外观。它可以在 iOS 上运行，尽管那里还有另一个错误。但在 Android 上我遇到了同样的问题。在前进导航中，它会更新标题，但当您按后退按钮时，标题不会更新。我已经打开了一个问题并添加了一个存储库。 https://github.com/dotnet/maui/issues/12416#issuecomment-1372627514 还有其他方法可以修改TitleView的外观吗？我使用视图模型开发了这个解决方法，主要不是为了提供 MVVM 解决方案，而是因为其他建议的答案对我不起作用。（我怀疑 Liqun Shen 2 月 15 日针对他自己的问题的评论中的建议会起作用。但我没有注意到这一点，直到我自己修复）。当前页面的标题保存在可由 shell 的视图模型和每个内容页面的视图模型访问的类中： public class ServiceHelper { private static ServiceHelper? _default; public static ServiceHelper Default => _default ??= new ServiceHelper(); internal string CurrentPageTitle { get; set; } = string.Empty; } shell 中每个内容页面的视图模型提供其页面标题。为了促进这一点，大部分工作都是由基本视图模型完成的，它们都是从该模型派生而来的： public abstract class ViewModelBase(string title) : ObservableObject { private ServiceHelper? _serviceHelper; public string Title { get; } = title; internal ServiceHelper ServiceHelper { get => _serviceHelper ??= ServiceHelper.Default; set => _serviceHelper = value; // For unit testing. } public virtual void OnAppearing() { ServiceHelper.CurrentPageTitle = Title; } } 每个 shell 内容页面视图模型只需要让其基础视图模型知道它的标题： public class LocationsViewModel : ViewModelBase { public LocationsViewModel() : base("Locations") { } } 每个 shell 内容页面都需要在其视图模型中触发所需的事件响应方法： public partial class LocationsPage : ContentPage { private LocationsViewModel? _viewModel; public LocationsPage() { InitializeComponent(); } private LocationsViewModel ViewModel => _viewModel ??= (LocationsViewModel)BindingContext; protected override void OnAppearing() { base.OnAppearing(); ViewModel.OnAppearing(); } } Shell 的视图模型为标题栏提供当前页面的标题： public class AppShellViewModel() : ViewModelBase(Global.ApplicationTitle) { private string _currentPageTitle = string.Empty; public string CurrentPageTitle { get => _currentPageTitle; set { _currentPageTitle = value; OnPropertyChanged(); } } public void OnNavigated() { CurrentPageTitle = ServiceHelper.CurrentPageTitle; } } Shell 需要在其视图模型中触发所需的事件响应方法： public partial class AppShell : Shell { private AppShellViewModel? _viewModel; public AppShell() { InitializeComponent(); } private AppShellViewModel ViewModel => _viewModel ??= (AppShellViewModel)BindingContext; protected override void OnNavigated(ShellNavigatedEventArgs args) { base.OnNavigated(args); ViewModel.OnNavigated(); } } 最后，Shell 的 XAML 在标题栏/导航栏上显示由 Shell 视图模型提供的当前页面的标题： <Shell.TitleView> <HorizontalStackLayout VerticalOptions="Fill"> <Image Source="falcon_svg_repo_com.png" HeightRequest="50"/> <Label x:Name="CurrentPageTitleLabel" Text="{Binding CurrentPageTitle}" FontSize="24" Margin="10,0" VerticalTextAlignment="Center"/> </HorizontalStackLayout> </Shell.TitleView>

在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单会重复

_header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> _header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> <div class="form-group" style="display:inline;"> <div class="input-group input-group-md"> <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %> <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %> <%if logged_in? %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %> <% else %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %> <% end %> <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span> </div> </div> <% end %> JS代码 <script> $( document ).on('turbolinks:load', function() { $('select#category').select2({ width: '60%', dropdownAutoWidth : true, placeholder: "Choose a category", maximumSelectionLength: 3 }); $('select#location').select2({ width: '40%', dropdownAutoWidth : true, minimumResultsForSearch: Infinity }); }); </script> 故障或渲染问题（单击链接查看图像）有人可以帮我解决为什么吗？另外，我的搜索表单位于标题部分文件的导航栏中。如果我去掉脚本中的 $(...).select ，一切都会正常...我认为 select.js 有问题在此回复： https://stackoverflow.com/a/41915129/5758027 我在自己的代码中使用了这个解决方案： $(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button. $('.select-select2').select2('destroy'); $('.select-search-select2').select2('destroy'); } ); 和观察者： $(document).ready( ready ); //... once document ready $(document).ajaxComplete( ready ); //... once ajax is complete $(document).on('turbolinks:load', ready ); //... once a link is clicked function ready() { $(".select-search-select2").select2({ theme: "bootstrap", language: 'es', allowClear: true }); $(".select-select2").select2({ theme: "bootstrap", language: 'es', minimumResultsForSearch: Infinity, allowClear: true }); }; 总是清除缓存不是会让使用 Turbolink 变得毫无意义吗？不如这样？ $(document).on('turbolinks:before-cache', function(e) { return $('.form-control.select2').each(function() { return $(this).select2('destroy'); }); }); 我无法解决这个渲染问题（仍在等待正确的答案！），但如果有人像我一样遇到类似的问题，请尝试跳出框框思考。这是我的技巧：我在应用程序中添加了一个后退按钮。获取完整的url路径 # get the previous url def save_previous_page session[:return_to] = request.fullpath end 仅当页面不是主页或搜索页面时才显示后退按钮 <% if session[:return_to] != request.fullpath%> <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <%end%> <% end %> 同时，我仍在等待并尝试解决渲染问题... 解决了问题只需将此代码添加到您的 .js 文件中 Turbolinks.clearCache(); 这很可能是一些资源不一致，您应该检查您的 app\views\layouts 文件夹中是否有重复声明 wither jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签，以及是否在 layout 文件夹和内部视图中声明相同的脚本。如果情况并非如此，请检查是否有 render、yield 或 build 呼叫简单的解决方案，不要在您不希望它运行的东西上运行 select2 构建器。 $("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2(); Rails 7 更新这里的很多东西在 Rails 7 中都不起作用，尤其是 turbolinks:before-cache 事件。您正在寻找的新事件是 turbo:before-cache 和 turbo:load，所以它看起来像这样： $(document).on("turbo:before-cache", function() { $("#select_id").select2('destroy'); }); $(document).on('turbo:load', function() { $('#select_id').select2(); });

链接到管理模板中的不同管理对象

我不想让js弄脏我的手。我有两个模型，汽车和模型。如何在自定义管理模板中手动添加从汽车到其模型的链接？我可以：我不想让 js 弄脏我的手。我有两个型号，car和model。如何在自定义管理模板中手动添加从汽车到其模型的链接？我能做到： <a href="{% url 'admin:appname_carmodels_changelist' %}">access changelist</a> 但是我如何访问 pk=42 的模型呢？我试过： <a href="{% url 'admin:appname_carmodels_change' 42 %}">access changeform</a> 但我最终得到了NoReverseMatch at /admin/appname/carmodel/.../change/。这可能吗？还是我必须使用一些可以携带反向功能的extra_context？ from django.urls import reverse from django.utils.html import format_html @admin.register(YourAPP) class AdminCustome(admin.ModelAdmin): list_display = ('id', 'link_to_other_obj',) def link_to_other_obj(self, obj): # foreign key is your other object(for example carmodel) related_obj = obj.foreign_key url = reverse('admin:appname_carmodels_change', args=[related_obj.id]) return format_html('<a href="{}">{}</a>', url, related_obj) link_to_other_obj.short_description = 'go_to_car_model_page'

Laravel POST 方法返回状态：405 不允许在 POST 方法上使用方法

请查找以下信息： NoteController.php 请查找以下信息： NoteController.php <?php namespace App\Http\Controllers; use App\Http\Requests\NoteRequest; use App\Models\Note; use Illuminate\Http\JsonResponse; class NoteController extends Controller { public function index():JsonResponse { $notes = Note::all(); return response()->json($notes, 200); } public function store(NoteRequest $request):JsonResponse { $note = Note::create( $request->all() ); return response()->json([ 'success' => true, 'data' => $note ], 201); } public function show($id):JsonResponse { $note = Note::find($id); return response()->json($note, 200); } public function update(NoteRequest $request, $id):JsonResponse { $note = Note::find($id); $note->update($request->all()); return response()->json([ 'success' => true, 'data' => $note, ], 200); } public function destroy($id):JsonResponse { Note::find($id)->delete(); return response()->json([ 'success' => true ], 200); } } NoteRequest.php <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class NoteRequest extends FormRequest { public function authorize() { return true; } public function rules() { return [ 'title', 'required|max:255|min:3', 'content', 'nullable|max:255|min:10', ]; } } Note.php（模型） <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Note extends Model { use HasFactory; protected $guarded = []; } api.php <?php use App\Http\Controllers\NoteController; use Illuminate\Support\Facades\Route; Route::prefix('v1')->group(function () { Route::resource('/note', NoteController::class); }); php artisan 路线：列表 GET|HEAD / ...................................................................................................................... POST _ignition/execute-solution ............... ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController GET|HEAD _ignition/health-check ........................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController POST _ignition/update-config ........................ ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController GET|HEAD api/v1/note .......................................................................... note.index › NoteController@index POST api/v1/note .......................................................................... note.store › NoteController@store GET|HEAD api/v1/note/create ................................................................. note.create › NoteController@create GET|HEAD api/v1/note/{note} ..................................................................... note.show › NoteController@show PUT|PATCH api/v1/note/{note} ................................................................. note.update › NoteController@update DELETE api/v1/note/{note} ............................................................... note.destroy › NoteController@destroy GET|HEAD api/v1/note/{note}/edit ................................................................ note.edit › NoteController@edit GET|HEAD sanctum/csrf-cookie .................................. sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show 迅雷请求（同邮递员） JSON 请求 { "title": "Hello World", "content": "Lorem ipsum." } 尝试发出 JSON POST 请求并获取状态：405 方法不允许并且我正在使用 php artisan 服务，如果需要，我可以提供 GIT 项目。请告诉我。您的验证规则看起来不正确。在您的 NoteRequest 类中，规则应该是一个关联数组，其中键是字段名称，值是验证规则。但是，在您的代码中，规则被定义为以逗号分隔的字符串列表。这可能会导致验证失败并返回 405 Method Not allowed 错误。 public function rules() { return [ 'title' => 'required|max:255|min:3', 'content' => 'nullable|max:255|min:10', ]; }

带有使用 requireJS 的 javascript 模块的 Flutter Web 项目（Flutter Web 中的 Monaco 编辑器）

我正在尝试在 Flutter Web 中使用 Monaco 编辑器。我看到的最简单的方法是同步加载所有资源示例。这是一个独立的 html 文件：我正在尝试在 Flutter Web 中使用 Monaco 编辑器。我看到的最简单的方法是同步加载所有资源示例。这是一个独立的 html 文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.css" /> <style> @font-face { font-family: "codicon", src: url("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/base/browser/ui/codicons/codicon.ttf") format("truetype") } </style> <title>Monaco</title> </head> <body> <h2>Monaco Editor Sync Loading Sample</h2> <div id="code" style="width: 800px; height: 600px; border: 1px solid grey"></div> <script> var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.nls.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.js"></script> <script> var editor = monaco.editor.create(document.getElementById("code"), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), language: "javascript", additionalCssClassName: "code" }); </script> </body> </html> 我的问题是：如何修改示例 Flutter Web 项目的 index.html 文件，以便加载所有必需的资源？线路好像有问题 var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } }; 因为 flutter 构建永远不会完成（卡在某个地方。）我看到 Flutter 本身使用 requirejs，并且可能存在我不知道如何解决的冲突。如果您知道如何执行此操作，请发布一个 Fluter Web index.html 文件，该文件加载编辑器所需的所有 js 文件。谢谢你， T https://github.com/Hua777/flutter_monaco_editor 我已经大致完成了flutter版的monaco编辑器。但还不完美，希望对你有帮助。

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，我的表单值可用于更新商店和更新表单。这是我能想到的最好的

MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）：我正在以这种方式使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）： <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性，但它基于具有 autofocus 属性的 MazInput 组件（https://maz-ui.com/components/maz-input）：我尝试通过 javascript 使用 onMounted 方法设置焦点： import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。如何在手机输入上设置自动对焦？这可以使用 template ref 来完成，它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装，因此需要额外的查询来获取实际的电话输入，然后您可以将其聚焦： onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })

表单响应：“无法处理请求 HTTP ERROR 500”。我做错了什么？

我尝试在网站上编写 php 表单，但收到错误 500。我无法弄清楚我做错了什么。你能看一下代码看看我做错了什么吗？ PHP：我尝试在网站上编写 php 表单，但收到错误 500。我无法弄清楚我做错了什么。你能看一下代码看看我做错了什么吗？ PHP： <?php // define variables and set to empty values $name = $email = $phone = $enquiry = ""; if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) { if ( empty( $_POST[ "name" ] ) ) { $nameErr = "Name is required"; } else { $name = test_input( $_POST[ "name" ] ); // check if name only contains letters and whitespace if ( !preg_match( "/^[a-zA-Z-' ]*$/", $name ) ) { $nameErr = "Only letters and white space allowed"; } } if ( empty( $_POST[ "email" ] ) ) { $emailErr = "Email is required"; } else { $email = test_input( $_POST[ "email" ] ); // check if e-mail address is well-formed if ( !filter_var( $email, FILTER_VALIDATE_EMAIL ) ) { $emailErr = "Invalid email format"; } } if ( empty( $_POST[ "phone" ] ) ) { $comment = ""; } else { $comment = test_input( $_POST[ "phone" ] ); } if ( empty( $_POST[ "enquiry" ] ) ) { $comment = ""; } else { $comment = test_input( $_POST[ "enquiry" ] ); } } // Create the email and send the message $destination = "[email protected]"; $subject = "Website Contact Form Enquiry: $name"; $body = "You have received a new message from your website contact form.\\n\\n"."Here are the details:\\n\\nName: $name\\n\\nEmail: $email\\n\\nPhone: $phone\\n\\nEnquiry:\\n$enquiry"; $header = "From: [email protected]\\n"; $headers = array(); $headers[] = "MIME-Version: 1.0"; $headers[] = "Content-type: text/plain; charset=iso-8859-1"; $headers[] = "From: " . $fromAddress; $headers[] = "Subject: " . $subject; $headers[] = "X-Mailer: PHP/".phpversion(); mail($destination, $subject, $message, implode("\r\n", $headers)); // mail($to,$subject,$msg,$headers); echo "Email successfully sent."; ?> HTML 格式： <form id="contact-form" method="post" action="/contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-10"> <div class="form-group"> <input id="form_name" type="text" name="name" class="form-control" placeholder="Name*" required="required" data-error="Your name is required." > <div class="help-block with-errors"></div> </div> </div> <div class="col-md-10"> <div class="form-group"> <input id="form_email" type="email" name="email" class="form-control" placeholder="Email*" required="required" data-error="Valid email is required." > <div class="help-block with-errors"></div> </div> </div> <div class="col-md-10"> <div class="form-group"> <input id="form_phone" type="text" name="phone" class="form-control" placeholder="Phone" > <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-10"> <div class="form-group"> <textarea id="form_enquiry" name="enquiry" class="form-control" placeholder="Enquiry*" rows="6" required="required" data-error="Please, leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <input class="btn btn-large btn-primary centre mt-10" type="submit" value="Submit" > </div> </div> </div> </form> 我已按照其他人的指示使表单正常工作，但所做的更改仍然会出现错误。这是一个简单的形式，但我似乎对我做错了什么缺乏了解。请帮助我。如果您查看发送邮件的行，这是一个硬行结尾，将 $headers 推到新行上吗？这将调用 500 错误。查看 /var/log/apache2/error.log（如果您使用的是 Debian）或 /var/log/httpd/error.log（如果使用的是 RHEL 或类似系统）。您的代码存在许多问题，但首先关注快乐的道路，然后让事情正常运行。

如何使用 blazor <InputDate /> 标签使用当地文化来格式化日期

我正在我的 Blazor 应用程序中使用该标签。但是我如何使用我自己的文化来格式化日期？我正在我的 Blazor 应用程序中使用该标签。但是我如何使用我自己的文化来格式化日期？ <InputDate class="form-control" @bind-Value="@ValidDate" @bind-Value:culture="nl-BE" @bind-Value:format="dd/MM/yyyy" /> 问候迪特尔答案是@bind-Value:format，就像这样 @page "/" <EditForm Model="@CurrentPerson"> <InputDate @bind-Value="@CurrentPerson.DateOfBirth" @bind-Value:format="dd/MM/yyyy"/> </EditForm> @code { Person CurrentPerson = new Person(); public class Person { public DateTime DateOfBirth { get; set; } = DateTime.Now; } } 还可以选择使用bind-Value:culture。无法设置InputDate或<input type="date">的格式。这取决于浏览器设置。用户可以更改浏览器的语言。但您无法从 HTML 更改它。如果您确实需要自定义格式，则必须使用InputText或<input type="text">。我建议使用一些 javascript 库，例如 jQuery UI datepicker。该解决方案对我不起作用。我是这样工作的： @代码{ 仅私人日期？ _geboortedatum; private string GeboortedatumFormatted { get => _geboortedatum?.ToString("dd-MM-yyyy") ?? ""; set { if (DateOnly.TryParse(value, out var newDate)) { _geboortedatum = newDate; } } } } 地质学 _geboortedatum" class="text-danger" />

Angular tabView primeNG 路由

我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];

Kendo MVC UI Scheduler 自定义编辑器模板验证

我试图在自定义编辑器模板中删除此组合框的验证： ... @{ ViewContext.FormContext = new FormContext(); } 我试图在自定义编辑器模板中删除此组合框的验证： ... @{ ViewContext.FormContext = new FormContext(); } <div data-container-for="ClientId" class="k-edit-field"> @(Html.Kendo().ComboBoxFor(model => model.ClientId) .HtmlAttributes(new { data_bind = "value:ClientId", id = "ClientId", data_val = false }) .Name("ClientId") .DataTextField("Text") .DataValueField("Value") .DataSource(source => { source.Read(read => { read.Action("GetClientsList", "Scheduler"); }).ServerFiltering(true); }) .Events(e => { e.Select("onSelect"); }) .HtmlAttributes(new { style = "width:100%;" })) </div> @{ ViewContext.FormContext = null; } ... 尝试使用以下方法删除模型中的验证： [AllowAnyValue] public int? ClientId { get; set; } public class AllowAnyValueAttribute : ValidationAttribute { public override bool IsValid(object value) { // Always return true to allow any value return true; } } 尝试在组合框输入中添加新文本，例如名称，我仍然收到此 Kendo 错误留言： `The field ClientId must be a number.` 我对验证 Kendo 控件不太熟悉，但在我看来，您正在为具有“Text”和“Value”字段的实体指定组合框，而您绑定的实体是一个名为“ClientId”的简单可为空 int . 添加一个 CbBoxValue 类，如下所示： public class CbBoxValue { [AllowAnyValue] public int? Value { get; set; } public string Text { get; set; } public CbBoxValue ( int? ClientId ) { Value = ClientId; Text = ClientId?.ToString() ?? ""; } } 然后将 CbBoxValue(ClientId) 传递给组合框，而不是直接传递 ClientId。注意：我还没有测试过这个，正如我所说，我对此事不是很熟悉，但这对我来说似乎是合乎逻辑的。

如何在 Vuetify.js 中单击附加图标时调用函数？

我需要append-icon="close"来调用@click="clearSearch()" 现在我正在使用一个专用按钮来实现它：我需要 append-icon="close" 打电话给 @click="clearSearch()" 现在我正在使用专用按钮来实现它： <v-text-field v-model="search" class="search" label="search" prepend-icon="search" append-icon="close"> </v-text-field> <v-btn @click="clearSearch()"></v-btn> 我尝试添加append-icon-cb="clearSearch()"但它不起作用，我不知道为什么我也尝试过简单地使用clearable，它会清除输入，但所有元素都保持“过滤”状态。我不知道 clearable 是如何工作的，但我的 clearSearch() 方法只是这样做： clearSearch() {this.search = ""} 并且它有效，这就是为什么我使用自定义 clear input 方法使用 @click:append="clearSearch"，:append-icon-cb 已弃用。（来源）解决了，解决方法如下：为了避免这个问题，您应该使用 : 符号绑定属性： :append-icon-cb="clearSearch" 并且不要放()，否则它将无法工作（正如@Traxo提到的）我认为如果你删除 () 应该可以工作，因为包含 () 后，你立即只需调用一次函数即可。编辑：不要忘记冒号: 所以： :append-icon-cb="clearSearch" 但这发生了变化：对于附加图标，例如 append-icon="mdi-magnify-plus-outline", 你就这样做 @click:append="zoomIn"。但是对于附加外部图标，例如 append-outer-icon="mdi-plus-circle-outline"，` 您必须添加单词“append”，即 @click:append-outer="addMore" 因此，这将适用于 Vue2 <v-text-field solo append-outer-icon="mdi-plus-circle-outline" @click:append-outer="addMore" > </v-text-field> 只需将 :append-icon-cb="() => (e1 = !e1)" 更改为 @click:append="() => (e1 = !e1)" 即可完美运行并删除警告...

如何禁用 HTML 输入中的第一个空格？

考虑一个带有文本输入的简单 Vue 组件（链接）。从 'vue' 导入 { ref } const 消息 = ref('') 函数 onInput(e) { 让 value = e.target.value; 如果（值===''）...</desc> <question vote="0"> <p>考虑一个带有文本输入的简单 Vue 组件（<a href="https://play.vuejs.org/#eNp9kc1uwjAQhF9l5YtBQuHQnmhS9Ucc6KGt2h59icImNXVsyz8UCeXdu3aAckDc4plv4xnvnj1aW2wjsgUrfeOkDeAxRHsvtOytcQH24LCFAVpneuCEcqGFboz2AXrfQZX8CefTJLdRN0EaDUavtI1hglPYCw2gMMC2VhGJxyLUrsNQZOEu2bKFycGuKuDApyea80zQVSNP0nFuELqcj6kpLx0C9lbVAekEUMqUABaZrgSjPwgGD1ml4yEhSXPCy/nZLJux4KlhK7ti442mx8klBGtMb6VC92ZTSy/YYqyXvFop8/uSteAizo56843NzwV943dJE+zdoUe3RcFO3vhAo738fMUdfZ/M3qyjIvqK+YHeqJgyjthT1GuKfcbltKu8Yqm7L7/cBdT+WCoFTeSQecFo7c9Xqv/HvSlu8xwthw1/RIzIQw==" rel="nofollow noreferrer">链接</a>）。</p> <pre><code><script setup> import { ref } from 'vue' const msg = ref('') function onInput(e) { let value = e.target.value; if (value === ' ') value = ''; msg.value = value; } </script> <template> <input :value="msg" @input="onInput" /> </template> </code></pre> <p>我想禁用此输入中的第一个空格，即如果用户输入空格，则输入字段应保持为空。但这不起作用。我猜这是因为 Vue 检查 <pre><code>msg</code></pre> 没有改变并拒绝组件渲染。</p> <p>我的下一个尝试是强制渲染组件（<a href="https://play.vuejs.org/#eNp9UstOwkAU/ZWbiUkhMWWhKwRRCQtcqPGxm01TbnGwnZnMA2tI/9070xYwGDZN5zxuzz2dHbvXOt16ZGM2sbkR2oFF5/Utl6LSyjjYrdHNvTEo3VJal8kcGyiMqiAhX3LQgcEC/lJc5oo8UNk1TAM/SJLhARbdPOJOPzIY3gRl4WXuhJKg5FJq7wY4hB2XACU62GalD25MXWZoRBoB8gGIAgYdPZ1CAklng70pSaIQQrrWSGA7IKAt10ecpdqo+meWXhTK5PihV5lrIwaVocqMjIcmPE4ncknEZNRWTOXSwWGlS5pCJ4CJCMvBOKqnnNEEzuAuonTslidoRPLJ6MjLLpmz1Gch1unGKkl/Mi7KWa4qLUo0zzoUaDkb9xVwlpWl+n6MmDMeL3s8/8T86x98Y+uAcfZi0KLZImd7ru2+pRdvT1jT+56s1MqXpD5DvqJVpQ8ZW9mDlyuKfaSLaZfxngm5freL2qG0/VIhaKw+6jmjuzc/s/oh7lV63f2yhjW/2ToDyQ==" rel="nofollow noreferrer">链接</a>）。</p> <pre><code><script setup> import {getCurrentInstance} from 'vue' import { ref } from 'vue' const msg = ref('') const instance = getCurrentInstance(); function onInput(e) { let value = e.target.value; if (value === ' ') { value = ''; msg.value = value; instance?.proxy?.$forceUpdate(); return; } msg.value = value; } </script> <template> <input :value="msg" @input="onInput" /> </template> </code></pre> <p>它有效，但有限制。我的项目有一个大的组件树，并且 <pre><code>$forceUpdate</code></pre> 仅更新当前组件，没有子组件。</p> <p>我还尝试通过更改组件上的 <pre><code>key</code></pre> 来重新渲染整个子三个，但在这种情况下我失去了输入的焦点。</p> <p>总而言之，我似乎错过了什么。我不敢相信这么简单的任务需要奇怪的解决方法。请帮助我找到一种简单且“最佳实践”的方法来禁用 html 输入中的第一个空格。</p> </question> <answer tick="false" vote="0"> <p>您应该使用正则表达式从字符串中删除第一个空白字符。</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code> const { createApp, ref } = Vue; createApp({ setup() { const inputValue = ref(''); const removeFirstSpace = () => { // 使用正则表达式去除第一个空格 inputValue.value = inputValue.value.replace(/^\s/, ''); }; return { inputValue, removeFirstSpace }; } }).mount('#app');</code></pre> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 3 Input 示例</title> <script src="https://unpkg.com/vue@3"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } </style> </head> <body> <div id="app"> <h1>输入示例</h1> <input type="text" v-model="inputValue" @blur="removeFirstSpace" placeholder="输入一些内容"> <p>你输入的内容是: {{ inputValue }}</p> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码：创建（）{ this.tabs = this.$children; } 标签： .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码： created() { this.tabs = this.$children; } 标签： <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3：如何使用组合 API 获取有关 Tabs 组件中子项的一些信息？获取长度，迭代它们，并创建选项卡标题，...等？有任何想法吗？（使用组合API）这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件： <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们，我解决了： this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人：标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案（在对 vue 代码进行大量筛选之后）是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码，用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码然后只需向“选项卡”组件添加一个创建的方法，该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法，您可以使用useSlots：https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进，因为它不支持热重载/动态选项卡。在 Tab.vue 中： onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中： const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题，在做了很多研究并问自己为什么他们删除了$children之后，我发现他们创建了一个更好、更优雅的替代方案。这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息： https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用，向大家问好！！我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。我一直在遵循我最初发现的构建选项卡组件（Vue2）的教程的早期版本创建您自己的可重用 Vue 选项卡组件。根据 Vue 文档，假设您在 Tabs 组件下有一个默认插槽，您可以直接在模板中访问该插槽的子级，如下所示： // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于： // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容（考虑一组对象，每个部分一个，带有 title 和 component）： ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots，如 Vue 文档（上面的链接）中所述。在 3.x 中，$children 属性已被删除并且不再受支持。相反，如果您需要访问子组件实例，他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中，$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息：https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答： /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外：而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。

large-language-model 相关问题

最新问题