How to hide some dynamically generated div's in VueJS v-for

Question

How do I hide dynamically generated div elements in VueJS? I have a chatbot application whereby the messages are sent in a prop called messages , this messages array is iterated through and it's information is displayed on the screen in multiple Div's. One of the Div's which is generated is used to gauge whether they liked the response or not. Ideally, once the user has selected either "Yes" or "No", then that specific response option box would disappear, however all of the solutions I've tried so far cause all of the response option boxes to disappear.

I've tried adding the.isHidden property on the div and then toggling it on either button click, But when I do that, every single response option box disappears. and no new ones appear either.

I've also assigned a dynamic ID with the intention of hiding the specific div using that, which is how I'd have solved this using Vanilla JavaScript. But I'm struggling to target specific Div's by their ID as I keep getting null in the console.

Is what I am trying to do possible?

I've included a screenshot of the UI, aswell as the code (I've highlighted the specific piece of code which I would like to disappear for each message after clicked).

The last image shows the exact divs I want to hide, eg if I wanted to hide messageResponseSatisfactionOption3 and messageResponseSatisfactionOption6 after they have been clicked. Sorry for the blocking out of a lot of the image, this is for a project at university.

UI of application

Code snippet

UI image with element console open

Thanks in advance:)

Answer 1

For example if the message is

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

And on the element you have:

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

and in the method after they response and you want it to be removed you pass for example the index of the message in the list and inside the method you do:

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