Estoy tratando de codificar en Vue js un texto que cambia de color con un clic y guarda su estado en una cookie. Funciona bien en la primera visita (sin cookies), el color cambia correctamente, pero después de actualizar, el color siempre se vuelve verde. Pensé que había un problema con la cookie, así que mostré su valor (verdadero/falso) en una forma diferente y funciona correctamente. Solo el color no funciona.
He usado esa biblioteca de cookies -> https://www.npmjs.com/package/vue-cookies
Video con el problema -> https://streamable.com/ky2l1z
<body> <div id="app"> <h1 v-bind:class='{cookieColor: color}'>{{ color }}</h1> <h1 v-bind:class='{cookieColor: color}'>COLOR</h1> <button @click="setCookie">CHANGE COLOR</button> </div> <script> //CHECKS IF COOKIE EXISTS var cookieCheck = $cookies.get('isDark'); if(cookieCheck === 'undefined'){ cookieCheck = false; console.log('COOKIE DOESNT EXIST'); }else{ console.log("COOKIE EXISTS") } new Vue({ el: '#app', data: { color: cookieCheck, }, methods: { setCookie(){ this.color = !this.color; $cookies.set('isDark', this.color); var cookieCheck = $cookies.get('isDark'); console.log(this.color); } }, }) </script> <style> h1{ color:black; } .cookieColor{ color: rgb(157, 207, 157); } </style>Intente analizar el valor de cadena a booleano usando JSON:
var cookieCheck = $cookies.get('isDark'); if (cookieCheck === 'undefined') { cookieCheck = false; console.log('COOKIE DOESNT EXIST'); } else { console.log("COOKIE EXISTS") // if it exists parse the value cookieCheck = JSON.parse(cookieCheck) // Check its type console.log(typeof cookieCheck) // >> boolean }