时间戳

首页 > 解决方案 > 如何在 VueJS v-for 中隐藏一些动态生成的 div

javascript - 如何在 VueJS v-for 中隐藏一些动态生成的 div

问题描述

如何在 VueJS 中隐藏动态生成的 div 元素？我有一个聊天机器人应用程序，其中消息在一个名为的道具中发送messages，这个消息数组被迭代，它的信息以多个 Div 的形式显示在屏幕上。生成的 Div 之一用于衡量他们是否喜欢响应。理想情况下，一旦用户选择了“是”或“否”，那么该特定响应选项框就会消失，但是到目前为止我尝试过的所有解决方案都会导致所有响应选项框消失。

我尝试在 div 上添加 !isHidden 属性，然后在任一按钮单击时切换它。但是当我这样做时，每个响应选项框都会消失，也不会出现新的选项框。

我还分配了一个动态 ID，目的是使用它隐藏特定的 div，这就是我使用 Vanilla JavaScript 解决这个问题的方法。但是我正在努力通过他们的 ID 来定位特定的 Div，因为我在控制台中一直为空。

我正在尝试做的事情可能吗？

我已经包含了 UI 的屏幕截图以及代码（我已经突出显示了我希望在单击后为每条消息消失的特定代码）。

最后一张图片显示了我想要隐藏的确切 div，例如，如果我想要隐藏messageResponseSatisfactionOption3并且messageResponseSatisfactionOption6在它们被点击之后。很抱歉遮挡了很多图像，这是针对大学的一个项目。

应用程序界面

代码片段

元素控制台打开的 UI 图像

提前致谢 ：）

标签： javascriptvue.js

解决方案

例如，如果消息是

message: {id: 1, name: "name", side: "side", isStatisfationResponseRequired: true,isStatisfationResponseAnswered: false,...}

在你拥有的元素上：

<div :id="'messageResponseSatisfactionOption' + message.id" v-if="isStatisfationResponseRequired(message.isStatisfationResponseRequired,message.id)&&!isStatisfationResponseAnswered">

并且在他们响应并且您希望将其删除之后的方法中，您传递例如消息在列表中和您执行的方法中的索引：

hideResponse(index) {
    this.messages[index].isStatisfationResponseAnswered= false;
}

推荐阅读