Vue.js中v-bind:class与vue-cookies搭配使用的异常问题排查

问题根因 #

vue-cookies 存储的所有值都会自动转为字符串类型，你存入的布尔值true/false读取时会变成字符串'true'/'false'。JavaScript 中非空字符串的布尔判定结果都为true，所以v-bind:class='{cookieColor: color}'永远判定为真，绿色样式始终生效。

修复方案 #

读取cookie后将字符串值转换为布尔值即可，修改后的完整代码如下：

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

    // 校验cookie是否存在
    var cookieCheck = $cookies.get('isDark');  

    if(cookieCheck === undefined){
        cookieCheck = false;
        console.log('COOKIE DOESNT EXIST');
    }else{
        // 新增：将cookie返回的字符串转为布尔值
        cookieCheck = cookieCheck === 'true';
        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>

内容的提问来源于stack exchange，提问作者caiq