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

What could be the reason for the counter not being incremented when the button is clicked

While attempting to increase the counter in my test, I encountered an issue where pressing the button did not change the value. I tried using both fireEvent from React testing library and React test utils, but the value remained at 10. My project is using ...

javascriptreactjsdom

Can you suggest a more efficient method for retrieving data from a string?

Imagine having an array of strings with various information, and you need to extract specific details from them. Is there a simpler method to achieve this task? Consider the following array: let infoArr = [ "1 Ben Howard 12/16/1988 apple", "2 James S ...

javascriptarraysregex

Learn how to retrieve URL parameters using HTML code

I would like to update the URL without refreshing the page as I am using an AJAX function to refresh a specific div. The issue I am encountering is that when the div is reloaded via AJAX, it does not recognize the URL parameter. Below is my code (I have a ...

phpjavascriptjqueryhtmlajax

I believe this solution is functional, but it seems to undermine the intention of utilizing a framework

Having just started with vue and js, I recently put together a photo gallery. I'm looking to reduce the opacity of selected photos and then reset it when switching between photos. The current code works fine, but I believe there could be a better way ...

vue.jsvue-component

The Bootstrap validator triggers the form submission only after the second click

When I click on the submit button, I am attempting to submit a form that has its default action prevented and first checks a condition before proceeding. Below is the code snippet: $('#payment-form').bootstrapValidator({ live: 'dis ...

javascriptjqueryformstwitter-bootstrapbootstrapvalidator

Having trouble selecting the clicked element after a successful Ajax call, especially when there are multiple elements with the same name

When dealing with multiple elements that share the same class name, I am attempting to target the 'clicked' element upon a successful Ajax return. <td data-name='tom' class="status"><a href="">click< ...

javascriptjqueryajax

Searching for corresponding items in multi-dimensional arrays using Javascript

For my project in Javascript, I am facing the challenge of matching entire arrays. In this scenario, I have a userInput array and my goal is to locate a similar array within a multi-dimensional array and display the match. var t1 = [0,0,0]; var t2 = [1,0, ...

javascriptjqueryarraysmultidimensional-arrayunderscore.js

Finalizing an item's status

I am quite puzzled about the workings of closures in this particular code snippet: function Spy(target, method) { var result = {count: 0}, oldFn = target[method]; target[method] = function(input) { result.count++; return ol ...

javascriptclosures

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Why is it difficult to obtain the width of hidden elements? Here is my code: .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ul class="navbar-items"> <li> ...

javascriptjquerycsseachouterwidth

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

Information not being refreshed by Event Bus

I'm facing an issue with fetching data from one component (A) to another component (B). Component A: methods: { setData(data) { eventBus.$emit("setDataEvent", data); } } This is the part where I am trying to retrieve the data. Comp ...

vue.js

Providing dynamic string outputs depending on the current date using AngularJS

I set up an advent calendar that reveals a new question every day, but currently the questions aren't showing up. Here's the code I have: The controller located in app.js: .controller('textCtrl', function($http) { this.data = {}; ...

javascriptangularjs

retrieving JSON data within the controller

When I use the command console.log($scope.data), I am able to view my JSON file. Additionally, by using <div ng-repeat="item in data">, I can see all the items in the view. However, when I try console.log($scope.data[0]) or console.log($scope.data[0] ...

javascriptarraysjsonangularjs

Combining the elements within an array of integers

Can anyone provide insight on how to sum the contents of an integer array using a for loop? I seem to be stuck with my current logic. Below is the code I've been working on: <p id='para'></p> var someArray = [1,2,3,4,5]; funct ...

javascripthtmlfor-loop

Is there a way to eliminate the blue border from a Material React Modal?

I am currently using the React Material Modal and noticed that in the demo examples, there is a blue border when the modal is opened. Is there a way to remove this blue border? I have tried setting the disableAutoFocus property to "true" in the Modal Api ...

javascriptreactjsmaterial-ui

Issues with the @input listener failing to work on a customized component

I'm currently experimenting with a unique component from the PrimeVue library. It claims to support any event: "Any valid event such as focus, blur and input are passed to the underlying input element." The event listener seems to be workin ...

vue.jseventsvuejs2primevue

Ajax/PHP - unrecognized value in autofill

I have implemented this particular example to execute an ajax data query from a MySQL database, which returns a table. Currently, this setup functions correctly when text is manually entered into the input form. Example: The issue arises with the autocom ...

javascriptphpjquerymysqlajax

Is it expected to conceal children who are 2 years old?

I came across the following HTML code snippet: <ul id="product_create-header" class="stepy-header"> <li id="product_create-head-0" class="stepy-active"> <div>Categoría</div><span>Categoría</span> </ ...

javascriptjquery

Guide to Sending and Scheduling Notifications through HTML 5's Notification Web APIs

Is it possible to utilize Web APIs to Schedule Notifications and send them at specific times? I am working on a CMS application that allows users to schedule and send push notifications for their mobile apps. I am interested in implementing something sim ...

javascripthtmlweb-notifications

Show specific elements in a listview using JavaScript

I have created a dynamic listview using jQuery Mobile that currently shows 4 list items. The list is generated through JavaScript. $( document ).ready(function() { var data = [{ "name": "Light Control", "category": "category", "inf ...

javascript