- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 vue 上使用 v-for
和 styles
时遇到问题,看看这个示例,我在 data< 上存储了多个警报错误
,当用户单击关闭按钮时,li
会收到某种样式以将卡片移至左侧,然后我使用 .filter
删除该错误,但是如果要删除的元素是最后一个元素或之前的元素,则样式将转移到下一个元素,使其也消失。
重现步骤:- 运行片段- 删除第二个警报
const app = new Vue({
el: '#app',
data(){
return {
errors: [
'test',
'blah, blah',
'hey, this is an error message, be careful'
]
}
},
methods: {
dismiss(index) {
const errorElement = this.$refs.errorElements[index]
errorElement.style.height = errorElement.offsetHeight + 'px'
errorElement.style.transition = 'margin-left .2s ease-in, height .2s ease-in .2s, padding .2s ease-in .2s'
errorElement.style.marginLeft = '-250px'
setTimeout(() => {
errorElement.style.height = 0
errorElement.style.padding = 0
}, 200)
setTimeout(() => {
this.errors = this.errors.filter((error, i) => {
return i != index
})
}, 600)
// .2s of margin-left
// .2s of delay to height and padding
// .2s of height and padding
}
}
});
* {
margin: 0;
padding: 0;
outline: 0;
text-decoration: none;
color: inherit;
list-style: none;
box-sizing: border-box;
}
html, body, #app {
height: 100vh;
background-color: #ccc;
font-family: 'Roboto';
}
.alert-wrapper {
position: fixed;
bottom: 25px;
left: 25px;
}
.alert-wrapper ul {
display: flex;
flex-direction: column;
}
.alert-wrapper ul li {
margin-top: 15px;
padding: 15px 25px;
background-color: #e75147;
color: #Fff;
font-size: 12px;
line-height: 140%;
border-radius: 5px;
position: relative;
width: 200px;
}
.alert-wrapper ul li .close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
color: #Fff;
transition: .2s;
cursor: pointer;
opacity: .8;
font-weight: bold;
}
.alert-wrapper ul li .close:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="alert-wrapper">
<ul>
<li v-for="(error, index) in errors" :key="`alert-${index}`" ref="errorElements">
<span class="close" title="Fechar mensagem" @click="dismiss(index)">x</span>
{{ error }}
</li>
</ul>
</div>
</div>
最佳答案
首先,我建议您阅读一下 Vue 的内置过渡。这可以让您避免直接操作 DOM。
但是,这里的主要问题是 key
属性。
当组件首次渲染时,它将创建 3 <li>
键为 alert-0
的元素, alert-1
和alert-2
。从技术上讲,它比这更复杂一些,因为涉及到 VNode,但出于解释目的,我将坚持只使用键和 DOM 节点。
当您删除索引为 1 的项目时,后续项目将沿某个位置随机排列。因此,之前位于索引 2 的项目现在位于索引 1。
当渲染这个更新后的数组时,它将创建 2 <li>
节点,其中一个带有 key
的alert-0
另一个是 alert-1
。然后,Vue 会将新旧节点配对,并制作必要的补丁以从一个节点移动到另一个节点。这就是一切出错的地方。你想要的是 Vue 删除旧的 DOM 节点 alert-1
但就 Vue 而言,它仍然有一个名为 alert-1
的节点。从Vue的 Angular 来看是alert-2
已经消失了。
因此 Vue 将删除节点 alert-2
,不是alert-1
。然后它将更新 alert-1
的内容。 alert-1
的新内容将与 alert-2
的旧内容相同。这可能使它看起来像 style
已经跳转了节点,但实际上并没有,只是内容移动了。
解决方案是使用正确的 key
这与项目本身而不是其索引相关。如果您的情况没有自然选择,那么您可以使用某种形式的随机数或递增计数器在数据中生成合适的 ID。
关于javascript - Vue 在删除 DOM 元素后将内联样式传输到下一个元素 [with snippet],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61514625/
我一直在做一些关于测量数据传输延迟的实验 CPU->GPU 和 GPU->CPU。我发现对于特定消息大小,CPU->GPU 数据传输速率几乎是 GPU->CPU 传输速率的两倍。谁能解释我为什么会这样
我将 ElasticSearch 用作我的 Post 模型的 Rails pet 项目应用程序的全文引擎。在我的 posts_controller.rb 索引操作中: def index
概述 流经网络的数据总是具有相同的类型:字节,这些字节如何传输主要取决于我们所说的网络传输。用户并不关心传输的细节,只在乎字节是否被可靠地发送和接收 如果使用 Java 网络编程,你会发现,某些时候当
我正在编写一些代码,以便将共享点从该页面转移到另一个页面: Server.Transfer("/DefectManagement/DefectList/default.aspx") 但是我遇到了这个问
我有这个泄漏,任何猜测?这个类有一些奇怪的引用。我的代码的任何地方都没有 contentobserver In com.example:1.5.0:27. com.example.ui.record
我听说过点对点内存传输并阅读了一些关于它的内容,但无法真正理解与标准 PCI-E 总线传输相比它的速度有多快。 我有一个使用多个 GPU 的 CUDA 应用程序,我可能对 P2P 传输感兴趣。我的问题
ftping 文件时,Transmit 中是否有忽略或过滤器列表?我希望它忽略上传 .svn 文件等。 最佳答案 是的。转到首选项并选择 Rules标签。在那里您可以定义要跳过哪些文件的规则。实际上,
我有以下片段来生成声音,在 while 循环中,我想动态更改它,以便它在声音生成期间创建不同频率的声音。 for(uint16_t i = 0; i < sample_N; i++) { da
我正在尝试使用 Delphi 2010 和 Indy 对 Web 服务进行概念验证。我此时的代码是: procedure TForm1.Log(const sEvent, sMsg: String);
我有一个 ActiveMQ JMS 代理,在端口 61616 上使用默认的 openwire TCP 传输公开。 我有许多远程客户端可以绑定(bind)到此代理来监听他们的消息。 如果我想打开 kee
reconnection strategies文档仅使用 JMS 示例,但是 FTP transport documentation确实说明了重新连接策略的使用,但没有任何细节或示例。 进一步,如果你
我有 2 个 TreeView,第一个填充有项目。 try { CheckBoxTreeItem treeRoot = new CheckBoxTreeItem("Root"); tr
在我为学校开发的一个网站上,用户输入他们的学校电子邮件和密码,如果他们已注册,则登录。如果没有,则会显示登录的第二部分,要求输入笔名称并确认密码。正因为如此,以及我复杂的业余 Django 编程,我有
我正在开发一个 Web 服务,我们在其中使用 LINQ-to-SQL 进行数据库抽象。当客户使用我们的网络服务时,对象被序列化为 XML,一切都很好。 现在我们希望开发我们自己的使用本地数据类型的客户
我应该创建一个名为“Backwards”的方法,该方法将列表从尾部横向到头部,但是当我运行代码时,它出现说(第 88 行)它找不到光标 = cusor.prev;象征。我需要在循环中再次设置上一个链接
给定像 Uint8Array 这样的类型化数组,似乎有两种方法可以通过 worker 传输它们。 选项 1 直接发送缓冲区并在接收端进行转换: 发件人:postMessage({fooBuffer:
在 PHP + jQuery 环境中,我和我的 friend 无法得出最佳解决方案。我们正在使用 Ajax 从数据库中获取数据。 解决方案 1 - Ajax 应该只传输数据,而不是 HTML 好处:我
大家好,非常感谢您的宝贵时间。 有一个 std::stringstream 需要传输到远程机器。网络库允许我用以下方法构建数据包: CreatePacket( const void * DATA, s
我正在使用 libcurl 通过 FTP 传输二进制文件 (.exe),并将其保存到本地文件。问题是文件传输后,它已被更改,不再是有效的 Win32 应用程序,因此无法运行。这是我的做法: CURL
各位程序员, 当我将它上传到我的 FTP 时,我的网站出现此错误:资源被解释为样式表,但使用 MIME 类型文本/纯文本传输 BlahBlahi
我是一名优秀的程序员,十分优秀!