Javascript 如何隐藏一些动态生成的div'；VueJS v-for中的s

如何在VueJS中隐藏动态生成的div元素？我有一个聊天机器人应用程序，消息通过一个名为

messages

的道具发送，这个消息数组被迭代，它的信息以多个Div的形式显示在屏幕上。生成的一个Div用于衡量他们是否喜欢响应。理想情况下，一旦用户选择了“是”或“否”，那么特定的响应选项框就会消失，但是我迄今为止尝试的所有解决方案都会导致所有响应选项框消失

我已经尝试添加了！单击div上的isHidden属性，然后在任一按钮上切换该属性。但当我这样做时，每个响应选项框都消失了，也没有新的选项框出现

我还分配了一个动态ID，目的是使用它隐藏特定的div，这就是我使用Vanilla JavaScript解决这个问题的方法。但我在控制台中不断得到null，因此我很难通过ID来定位特定的Div

我想做的事可能吗

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

最后一幅图显示了我想要隐藏的确切div，例如，如果我想在单击它们后隐藏

messageresponsesatiss派系选项3

和

messageresponsesatiss派系选项6

。很抱歉挡住了很多图片，这是大学的一个项目

---

提前感谢：）

例如，如果消息是

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

在您拥有的元素上：

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

---

你能添加一段代码说明你是如何迭代的吗please@GirlCodes我添加了另一张图片，显示了我想在点击按钮时隐藏的确切div：“MessageResponseStatis派系选项3”和“MessageResponseStatis派系选项6”，第一张图片显示了正在迭代的“messages”道具。这就是你想要的吗？：）要完全理解v-if=“message.isstatisationResponseRequired”并将此特定布尔值进行切换是不可行的？@GirlCodes感谢您的回复，不，if语句仅用于决定是否显示响应选项，因为它仅显示在某些响应上。这不是您正在尝试的吗？你想显示或不显示响应？这解决了我的问题！我从未考虑过在消息中切换布尔属性，因为我认为隐藏div是更好的解决方案，但您的解决方案肯定更好。非常感谢：）不客气，我很高兴能为您提供帮助，但您也可以使用另一个布尔值，如

showstationresponse

，并将其切换，然后添加一个

：class=“{'hidden'：showstationresponse}”

，该类没有显示

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