Tips for concealing dynamically generated div elements within a VueJS v-for loop

Is there a way to hide dynamically generated div elements in VueJS? In my chatbot application, messages are passed through a prop called messages. These message arrays create multiple Divs on the screen displaying information. One particular Div is used to determine user satisfaction with the response. I want this specific response option box to disappear after the user selects "Yes" or "No". However, all my attempts so far make all of the response option boxes vanish together.

I have tried using the !isHidden property on the div and toggling it upon button click. But each time I do that, all response option boxes disappear without any new ones appearing.

Another approach I took was assigning a dynamic ID to target specific divs for hiding, just like I would in Vanilla JavaScript. Unfortunately, I am having trouble targeting individual Divs by their assigned IDs as the console returns null.

Can what I am attempting be achieved?

I have attached screenshots - one illustrating the UI and another containing the code (I have highlighted the portion of code I wish to hide for each message after it's clicked).

The last image showcases the exact divs I intend to hide, like hiding 

messageResponseSatisfactionOption3
and 
messageResponseSatisfactionOption6
post-click. Apologies for blocking out major portions of the image; this is for a university project.

UI screenshot

Code snippet screenshot

UI image showing element console

Thank you in advance :)

javascriptvue.js

Answer №1

Consider this scenario:

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

Now, imagine you have the following element:

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

Later, when the user responds and you want to remove it, you can pass the index of the message in the list and use the following method:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

When I replicate this text يف عام and input it into a box, the output is shown as follows عام يف ...

javascriptcsshtmlarabic-support

Vue form component triggers the submit event twice

In my current project, I am utilizing the most recent version of Vue 3 without any additional vendors. After experiencing a setback in which I invested several hours attempting to uncover why my form component was triggering the submit event twice, I am le ...

javascriptformsvue.jsvuejs3

Conditions are in an angular type provider with AOT

I am facing an issue with my Angular project that is compiled using AOT. I am trying to dynamically register a ClassProvider based on certain configurations. The simplified code snippet I am currently using is below: const isMock = Math.random() > 0.5; ...

javascriptangulartypescriptdecoratorangular2-aot

Next.js throws a ReferenceError when the self variable is not defined while creating a child process using a custom webpack configuration

Trying to create a child process in Next.js for a time-consuming operation. Here is the webpack configuration (next.config.js): const { merge } = require('webpack-merge'); module.exports = { webpack: (config, { buildId, dev, isServer, defaultL ...

javascriptnode.jswebpacknext.jsfork

Exploring the features of NextJS version 13 with the benefits

Starting from the 13th step, SSR is utilized by default and in order to opt for client side rendering you must specify it at the top like so: 'use client' Currently, my setup involves TypeScript and styled-component integration. Take a look at ...

javascriptreactjstypescriptnext.js

The setAttribute method does not function with getElementByClass()

Can someone please help me understand why this code is not working for me: document.getElementByClass('home1').setAttribute('style', 'background-image:url(img/red_menu.PNG);'); I have confirmed that I do indeed have an eleme ...

javascripthtml

What is the process for sending data to a database using a URL?

I am in need of developing a public API for my application that will be capable of receiving a single POST request. The main goal is to provide users with the ability to submit data directly to my database without having to manually interact with forms on ...

javascriptpostgresqlexpresssequelize.jsapi-design

Utilizing AngularJS within a Captive Network Assistant (WISPr) on iOS and MacOS devices

In my past experiences with projects, it has been observed that Apple's Captive Network Assistant (also known as WISPr client) operates with a restricted browser. For further information, you can refer to How can I debug the browser in Captive Portal? ...

javascriptiosangularjscaptivenetworkwispr

Converting a nested JavaScript array into a PHP array

Having a javascript array is how my dilemma starts: foodList = ([apple,10,],[banana,20]) To convert this to a json object and send it to php, I perform the following action: var jsonData = JSON.stringify(foodList); The challenge now is extracting values ...

javascriptphparraysjson

Click on the next tab within the ExtJS tab menu

I am looking to deactivate a tab and if it happens to be active, I want the system to automatically switch to the next tab. I attempted myPanel.tab.disable(); if(myPanel.tab.active) myPanel.NextSibling().tab.setActive(); and myPanel.tab.disable(); ...

javascriptextjstabs

Vercel's Open Graph Image Generation encountering Failure - ERR_MODULE_NOT_FOUND

I am currently working on a project that utilizes NextJS and is deployed on Vercel. In an attempt to generate images, I am using the @vercel/og Open Graph Image generation library. However, each time the api route for the OG image is called, it leads to an ...

javascriptnext.jsfacebook-opengraphvercel

Encountering a TypeError when attempting to read the property 'name' of undefined while submitting a form in node.js

I'm currently working on a node Js project and I'm encountering an issue while saving form values to a mongoDB database. I've been troubleshooting but can't seem to pinpoint the cause of this error. The error is occurring at the router. ...

javascriptnode.jsformsexpresspost

Despite changes in the state they are set to, the InitialValues remain constant

I am facing an issue with a Semantic-UI modal that includes a redux-form as its content. The form is passed to the modal when it opens, and the form element has an initialValues prop mapped to state. <FormModal handl ...

javascriptreactjsreduxsemantic-uiredux-form

display or conceal a div when a radio button is selected

I need a way to display a specific div containing unique text once a radio button is selected, while hiding all other div sections. <?php foreach ($items as $item){ $i=1; echo ' <div class="form-check"> <input class="fo ...

javascriptphphtmlcss

Issue with Submit Button Functionality in Django Form Submission

I'm currently facing an issue with an HTML template I built using Bootstrap. My problem lies in the fact that I have a JavaScript function that dynamically adds rows to a Django form with specific fields whenever I need to. However, when I add a row, ...

javascripthtmlcssdjangobootstrap-5

Create an express server that can stream mp3 files with the functionality to easily skip forward or rewind

My express server is set up to either download or stream an mp3 file, and here is the code: const express = require('express'); const fs = require('fs'); const app = express(); app.use('/mp3', express.static(__dirname + &apo ...

javascriptnode.jsexpressfilesystems

Troubleshooting a problem with $addToSet and $each in Mongo and Node.js

I'm facing an issue while using $addToSet to add an array of Strings to a MongoDB database. The Object setup is defined as follows: var mongoose = require('mongoose'); var Schema = mongoose.Schema; module.exports = mongoose.model('Co ...

javascriptarraysnode.jsmongodbmongoose

Transforming CSV files into JSON format using d3.js

I'm encountering an issue when attempting to convert CSV to JSON. The following is the snippet of code I am using for the conversion: d3.csv("http://localhost:8080/Sample/flight.csv", function(flights) { //alert(flights); ...

javascriptjsoncsvd3.js

How can Firebase effectively manage multiple URLs for referencing?

I am facing a scenario with multiple users, each with a unique hashId assigned to them that differentiates their URLs. users/hashId/bla/blah The only variation in these URLs is the hashId value. While the client side updates data in firebase, I need to ...

javascriptnode.jsfirebasefirebase-realtime-database

The accumulation of input using setInterval is not effective

I need some help with my code. Please take a look at this link here. I want the input to count up from zero and hide when I click the "change" button. But when I show the input again, I want its value to reset back to zero. Can anyone guide me on how to ...

javascriptvue.js