v-bind:class 和 cookie 的意外行为（Vue js）答案

【问题标题】：Unexpected behaviour of v-bind:class and cookies (Vue js)v-bind:class 和 cookie 的意外行为（Vue js）
【发布时间】：2021-11-10 17:18:52
【问题描述】：

我正在尝试在 Vue js 中编写一个文本，该文本在单击时会更改其颜色并将其状态保存在 cookie 中。第一次访问时效果很好（没有cookie），颜色变化正常，但刷新后颜色总是变绿。我认为cookie有问题，所以我以不同的方式显示了它的值（真/假）并且它工作正常。只有颜色不起作用。

我用过那个 cookie 库 -> https://www.npmjs.com/package/vue-cookies

有问题的视频 -> 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>

【问题讨论】：

在 else 块中尝试 console.log(typeof cookieCheck)。似乎存储的值被转换为字符串，它总是评估为真
谢谢，就是这样，但我怎样才能将它转换为布尔值？自从您发表评论后，我一直在努力解决它并且无法使其正常工作。

标签： javascript vue.js cookies

【解决方案1】：

尝试使用 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
}

【讨论】：