vuejs3中如何设置某一特定元素的key属性

在Vue3(版本3.4.21)中,我在列表中间有一个“单个”组件,我想为此元素设置一个特殊的键值,以便转换按预期工作。 在 Vue3(版本 3.4.21)中,我在列表中间有一个“单个”组件,我想为此元素设置一个特殊的键值,以便过渡按预期工作。 <transition-group> <template v-for="element in listOfElements" :key="element.id"> <list-item-component /> <single-component v-if="element.id == someVariable" key="uniqueText" /> </template> </transition-group> 由于 <single-component /> 条件,v-if 将仅渲染一次。 在上面的示例中,<single-component /> 获取键 "{element.id}uniqueText",该键在列表中唯一即可,但当 someVariable 更改时,键也会更改,并且节点将重新创建为新节点。副作用之一是在这种情况下转换很难看,因为在转换过程中两个节点是可见的。 如何重写 Vue 的默认机制以在这种情况下拥有不可变的键,或者如何重构我的模板,以便 <single-component> 的位置根据 <list-item-component /> 的值在 someVariable 之间平滑滑动? 谢谢 我最终使用了 vue 中的 <component /> (https://vuejs.org/api/built-in-special-elements.html#component) 来拥有一个通用的 for 循环,我可以在其中手动设置密钥: <transition-group> <component v-for="element in wrapper" :is="element.component" :key="element.key" /> </transition-group> 在脚本设置中,我添加了一个计算属性: <script setup> import ListItemComponent from "@/xyz.vue"; import SingleComponent from "@/wxyz.vue"; const wrapper = computed(() => { let out = []; for (let elem of listOfElements) { out.push({ component: ListItemComponent, key: elem.id }) if (someVariable == elem.id) { out.push({ component: SingleComponent, key: "static-unique-key" }) } } return out; }) </script> 这使得代码有点混乱,但是 someVariable 变化时的过渡很平滑。

回答 1 投票 0

从网页中抓取内容

我正在尝试从此网页中删除内容: www.motorcyclemonster.com/motorcycle-events.html,我使用的代码是: 我正在尝试从此网页中删除内容: www.motorcyclemonster.com/motorcycle-events.html,我使用的代码是: <?php $content = file_get_contents('http://www.motorcyclemonster.com/motorcycle-events.html'); $pattern = '#<tr.">\r\n<td>(.*)</td>\r\n<td>(.*)</td>#'; preg_match_all ($pattern, $content, $data); var_dump($data); for ($i = 0; $i < 11; $i++) { echo "<br /><br />". $data[2][$i].' '.$data[3][$i]; } ?> 我只是希望能够从以下内容中获取信息 <tr> <td width="23%" bgcolor="#76C2FA">Nov 15 - Jan 4</td> <td width="52%" bgcolor="#76C2FA"><b> <a href="/events/cars-and-christmas-2014-11-15-Hershey-PA.html" title="Cars and Christmas - Hershey, Pennsylvania">Cars and Christmas</a></b></td> <td width="20%" bgcolor="#76C2FA">Hershey</td> <td width="5%" bgcolor="#76C2FA">PA</td> </tr> 并且能够为 设置一些变量 <tr> <td width="23%" bgcolor="#76C2FA">**$date**</td> <td width="52%" bgcolor="#76C2FA"><b><a href=**$page_url**" title="**$title**">$title</a></b></td> <td width="20%" bgcolor="#76C2FA">**$city**</td> <td width="5%" bgcolor="#76C2FA">**$state**</td> </tr> 任何帮助将不胜感激 使用正则表达式解析 HTML 标签并不是一个好主意(出于多种原因)。我宁愿建议检查 PHP DOM,因为它是专门用于此类目的的。 最简单的方法是使用 PHP Simple HTML Dom Parser <?php /** * Created by PhpStorm. * User: Adrian * Date: 05/12/2014 * Time: 19:28 */ //Load website include('simple_html_dom.php'); $html = file_get_html('http://www.motorcyclemonster.com/motorcycle-events.html'); //For each table row $events = array(); foreach($html->find('table',2)->find('tr') as $h){ $temp = array(); //get date $temp['date'] = $h->find('td', 0)->innertext; //Inner contents of first cell if($url = $h->find('td', 1)) { if($url = $url->find('a', 0)) {//First link of second cell $temp['url'] = $url->href; //href attribute $temp['url_title'] = $url->title; //title attribute $temp['title'] = $url->innertext; // Inner content of link $temp['town'] = $h->find('td', 2)->innertext; $temp['state'] = $h->find('td', 3)->innertext; $events[] = $temp; } } } print_r($events); 注意:您需要首先包含 Simple HTML Dom Parser 然后您可以迭代此事件数组,以按照您的意愿显示它 出于礼貌,我可能只提供第一页或第二页,并提供返回源网站的完整列表的链接

回答 2 投票 0

使用Python请求访问经过身份验证的页面

我正在尝试编写一个简单的抓取工具来获取我的互联网帐户的使用详细信息 - 我已经使用 Powershell 成功编写了它,但我想将其移动到 Python 以方便使用/部署。如果我...

回答 1 投票 0

如何从 appsettings.json 获取密钥到 .Net8 中的 JavaScript 页面

我想从 appsettings.json 文件中获取密钥到 .net 8 MVC 项目中的 JavaScript 代码。 我已按以下方式在 appsetting.json 中添加了密钥。 应用程序设置.json { “请求计数限制&...

回答 1 投票 0

安装了asdf后如何运行jupyterlab?

假设安装了asdf并且我们使用的是python 3.8.19。如何运行“jupyter lab”作为常规命令 jupyter-lab 笔记本应该在 PATH 中引用并且不起作用。就在...

回答 1 投票 0

如何使用密码以 sudo 作为 jenkins 用户进行权限升级

我想在 Linux 服务器上使用 ansible 和 jenkins 运行配置手册以及自动修补。我需要集中式环境来进行修补和节点配置,我选择了 Jenki...

回答 1 投票 0

如果我们从 SQL Server 代理作业刷新多维数据集,如何跟踪 SSAS 多维数据集刷新失败详细信息

我们有一个表格模型多维数据集,每天通过调用 SSAS 命令的 SQL 代理作业进行刷新。命令很简单: {“刷新”:{“类型”:“完整”,“对象&

回答 1 投票 0

管理 R 和 ggplot 中字符串的错误顺序。 X1、X10、X12:如何确保带有数字的字符串以正确的数字顺序呈现?

每次我想要绘制或列出包含数字的字符串时,R(和python)都会列出诸如“x1,x10,x11,x13,(等)x2,x3,x4”之类的值 我尝试使用 gtools::

回答 1 投票 0

无法在 Ignition 中挂载卷 |权限问题

我正在 AKS 中运行ignition 版本 8.1.42,它描述了以下问题。 8.1.25 版本运行完美。 我发现 8.1.25 正在以 root 用户身份运行,更新后包含...

回答 1 投票 0

如何将一个小部件置于另一个小部件的中心

我在 QWidget W 内有一个 QLabel L。L 垂直和水平对齐。当我调整 W 的大小时,L 没有居中。 这是预期的吗? 如何让 L 再次居中?

qt
回答 1 投票 0

使用 Asp.Net Core Identity 进行干净架构的授权和身份验证

我是第一次学习干净和垂直切片架构,如果我们使用 ASP.NET Core Ide,我很难理解授权和身份验证将在哪里适合......

回答 1 投票 0

q标签居中

我在qwidget W 中有一个qlabel L。L 垂直和水平对齐。 当我调整 W 的大小时,L 没有居中。 这是预期的吗? 让 L 再次居中的好方法是什么?

回答 1 投票 0

Angular 18 @返回错误 TypeError:newCollection[Symbol.iterator] 不是函数

我决定开始使用最新的 Angular 版本(Angular 18.1),到目前为止我正在使用版本 7 到 14... 我只是尝试制作一个小虚拟应用程序来展示电影列表...... 我做了一个重新...

回答 1 投票 0

如何代理到 Node.js 中仅接受 HTTP 1.1 的上游?

我有一个旧版 Express 应用程序,它使用 http 代理来代理对上游应用程序的调用。我正在将这两个应用程序迁移到 Azure 容器应用程序,当入口关闭时,这些应用程序在幕后使用 Envoy...

回答 1 投票 0

无法加载System.Net.WebHeaderCollection

.net 6.0项目,找不到dll。我检查了 nuget 和 System.Net.WebHeaderCollection 库。 这是错误: System.AggregateException:发生一个或多个错误。 (无法加载文件或

回答 1 投票 0

图像未出现,而是显示 alt 值

index.html代码及目录结构 输出 这是我的第一个网站。 我制作了一个基本网站,其中显示我的小型项目的图像和超文本以带您访问这些项目。 ...

回答 1 投票 0

将谷歌徽标图像保留在提升按钮内

我正在尝试在我的提升按钮内添加谷歌徽标。我尝试搜索但找不到任何有用的东西。我发现只能通过 ElevatedButton.icon 添加图标。我怎样才能显示谷歌或脸书或...

回答 1 投票 0

vba 中的 sql select 语句不从 excel 关闭的工作簿和其他一些值中提取标题

我正在使用 Excel 工作簿来提取已关闭的工作簿“RawData.xlsm”工作表名称“all_register”的数据。以下是代码,但此 vba 代码无法提取所有标头(

回答 1 投票 0

在 QLabel 中插入可点击链接并检测点击此链接以引发操作

我想处理我的这个应用程序中的链接点击: 当我单击“输出文件”链接时,我希望能够在我的应用程序中生成一个操作。 截至今天,我...

回答 1 投票 0

带边框切角[重复]

我想解决我的角落的问题。如图所示,边角被完美切割;但是,当我放大或缩小页面时,情况并非如此。 正如您所观察到的,边界有...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.