v-bind 的意外行为：class 和 cookies (Vue js)

Question

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

我用过那个 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>

Answer 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
}

v-bind 的意外行为：class 和 cookies (Vue js)

Unexpected behaviour of v-bind:class and cookies (Vue js)

javascript

cookies

vue.js