Hide HTML div once button is clicked with cookies? - html

Question

I'm trying to hide this message but without success in vue js.
Currently im using js-cookie library
What I am actually trying to do:
html
<div v-show="closeBox()">
<span><a id="closeButton" #click="closeBox()" href="#">Close</a></span>
<p>som info message</p>
</div>
javascript:
closeBox(){
if(#CloseButton.clicked()){ // if the button is clicked (not working in vue js)
Cookies.set("cookie", "false");
var cookie = Cookies.get("cookie");
}
else
{
cookie = true
}
return cookie;

Answer 1

I see you are trying to hide/close the div when the span is clicked.
You need to register the event method in the same vue component.
Also, it is better to use reactive state (showBox below) to show/hide the div
watch this example code...
<div v-show="showBox">
<span><a id="closeButton" #click.prevent="closeBox" href="#">Close</a></span>
<p>som info message</p>
</div>
data() {
return: {
showBox: true
}
},
methods: {
closeBox() {
this.showBox = false;
Cookies.set("cookie", "false");
var cookie = Cookies.get("cookie");
}
else
{
cookie = true
}
return cookie;
...

Answer 2

You can do this with vanilla js, css and HTML.
in you'r HTMl:
<div v-show="closeBox()">
<span><a id="closeButton" #click="closeBox()" href="#">Close</a></span>
<p id="message">som info message</p>
</div>
You'r js:
closeBox(){
let closeButton = document.getElementById("closeButton")
let message = document.getElementById("message")
if(closeButton.clicked()){ // pseudo code
message.className += "hide"
// sets the cookie
document.cookie = 'cookie=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'
}
}
and finally in you'r css:
.hide {
display: none;
}
Update
set cookie added in answer.
For more reference on working with cookies using vanilla js follow this link.

Answer 3

Here is the answer to my question. Where you can add a cookie to a close/hide button so it won't show again, unless the user deletes their browser data.
The following is achieved by using js-cookie library
<template>
<div v-show="isBoxShowing">
<a #click="closeBox">Close</a>
</div>
</template>
<script>
// here you import the cookie lib
export default {
data () {
return {
isBoxShowing: Cookies.get('cookie') !== 'false'
}
},
methods: {
closeBox () {
Cookies.set('cookie', 'false')
this.isBoxShowing = false
}
}
}
</script>