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

Question

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

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

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

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

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

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

UI of application

Code snippet

UI image with element console open

提前致谢:)

Answer 1

例如，如果消息是

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;
}