Ways to hide notifications by setting a timer while keeping the delete option visible

Presently, this is the code I am working with using Javascript and Vue.js.

I have an array called Messages.length that contains messages. When the x button is clicked, it triggers the "clearMessages(item)" function on the server side. However, I also aim to create a feature that automatically calls this function if the notification stays visible for more than 10 seconds.

<div v-if="messages.length">
   <div class="notification is-success">
       <p v-for="item in messages">{{ item }}</p>
        <a @click="clearMessage(item)" class="delete"></a>
   </div>
</div>
javascriptvue.js

Answer №1

Utilize the setTimeout method within the function responsible for appending messages to your array:

function addMessage(message) {
  messages.push(message);
  setTimeout(() => removeMessage(message), 10000);
}

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

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

javascriptjquerycssanimationjquery-animate

Consolidate multiple generic items into a single entry

In my current project, I am structuring the types for a complex javascript module. One of the requirements is to handle multiple types using generics, as shown in the snippet below: export interface ModelState< FetchListPayload, FetchListR ...

javascripttypescript

$q.all - successfully resolving some HTTP requests while encountering errors on others

I encountered a coding scenario like this angular.forEach(config.tvshows.shows, function(show) { promises.push($http.get('http://epguides.frecar.no/show/' + show.replace(/\s|\./g, '') + '/next/')); }); re ...

javascriptangularjs

Tips for aligning elements of varying heights

Currently, I am tackling a responsive web design challenge involving floating multiple items in 4 columns side by side. The issue arises due to the varying heights of these items, causing the floating to behave improperly. Here is the current problem illu ...

javascriptjquerycsscss-float

VuePress Sidebar refuses to display

//config.js sidebar:[ { title: 'Group 1', path:'/foo/', collapsable: false, sidebarDepth: 1, children: [ '/guide/', ...

vue.jsvuepress

Verify whether an item exists within a group of objects, and if so, eliminate it from the group; otherwise, include it in the group

I am working on a function to create an array of objects where only specific attributes are kept from the original object. The goal is to check if the selected object is already in the array - if it is, remove it; if not, add it. However, I'm facing ...

javascriptarraysreactjsjson

Monitoring Javascript inactivity timeouts

As I work to incorporate an inactivity timeout monitor on my page, the goal is to track whether individuals working from home are present at their desks or not. The Jquery plugin http://plugins.jquery.com/project/timeout that I am utilizing initiates a ti ...

javascriptjqueryhtmlajaxjquery-plugins

Getting the value of an element using a string in JQuery

How can I achieve the following using JQuery? var test = "'#ISP'"; alert($(test).val()); I am receiving a "Syntax error, unrecognized expression." I believe I might be overlooking something here. Thank you in advance! ...

javascriptjquery

Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element. How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't wo ...

javascriptcssbootstrap-4

Inject data from ajax into the body of the html document

Is it possible to retrieve values from an ajax call and insert them into the body of an HTML document? Here is an example: function check() { $.ajax({ url : '/check', datatype : 'json', async ...

javascriptjqueryhtmlajax

Navigating through the complexities of scoping in JavaScript when integrating Node.js

Currently, I am working on an express.js application without using mongoose. My goal is to create a function that can handle calls to MongoDB, pass parameters to it, and retrieve data from the database. However, I have encountered a problem with the foll ...

javascriptnode.jsmongodbexpress

Initiating an AJAX call in Vue.js using Vue-Router prior to the application launch

I'm currently developing a basic application that allows users to login, reset their password, and perform other actions once they are logged in. Additionally, I am utilizing Vue-Router and aiming to define 3 different types of routes: Routes acces ...

vue.jsvuejs2vue-router

What is the method for including preset text within a search bar?

My current issue is as follows: When the searchbox is focused, it appears like this: -------------------- -------------------- Upon exiting the searchbox, a string will automatically be added to it: -------------------- Search -------------------- I a ...

javascripthtmlsearchsearchbar

Find the variance between today's date and a selected date, then initiate the timer based on this variance

I have a grid containing data. I utilize the loadGrid() function to preload data or conditions before the grid finishes loading. When the active state is set to 1, my intention is to initiate a timer by calculating the difference between the current date ...

javascriptangulartypescript

Discovering a specific element using jQuery

I am trying to work with a div structure like this: <div class="country"> <div class="cty_popover"> <p>TITLE</p> <ul> <li>NAME 1</li> <li>NAME 2</li> ...

javascriptjqueryfind

Encountering the issue "unable to save user data" when attempting to modify a document

I am currently working on updating a document based on the provided code var express = require('express'); var router = express.Router(); var user = require('./user'); router.put('/:username/email', function(req, res, ne ...

javascriptnode.jsmongodbmongoose

Is there a way to effectively alter an object that has been assigned in a separate file?

Seeking Assistance: I am facing an issue in my current project where I need to store a javascript object in an external file and then export it using module.exports. The challenge now is that I want another file to be able to modify a specific value withi ...

javascriptnode.jsobjectdynamicnode-modules

Transforming JavaScript array UNIX timestamps into JavaScript Date objects

Is there a way to convert UNIX epoch integers into JavaScript Date objects using jQuery? Attempting to pass a large JSON array generated by PHP to Highmaps.JS, which works almost great. However, Highmaps expects a Date object and Date objects aren't ...

javascriptphpjqueryarraysjson

The React page loads before verifying the clients' permissions

In my application, I am using a Javascript query to fetch the data of the current user. This data is then used to verify the user's access permissions for different pages in my React app with the help of Apollo Client and GraphQL. Unfortunately, ther ...

javascriptreactjsgraphqlapollo

VueJS does not show a component if it is contained within a v-if or v-show directive

My goal is to show a component when the 'Add Patient' button is clicked using a v-if directive: // within <template></template> <button type="button" class="btn btn-info" @click="showPatientForm">Ad ...

javascriptvue.jsvite