我試圖在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}'>/span>COLOR</h1>/span>
<button @click="setCookie"/span>> CHANGE COLOR</button>。
</div>>
<script>/span>
//CHECKS if COOKIE EXISTS。
var cookieCheck = $cookies.get('isDark'/span>)。
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'/span>)。
console.log（this.color）。
}
},
})
</script>
<style>/span>
h1{
color:black;
}
.cookieColor{
color: rgb（157, 207, 157）。
</style>
uj5u.com熱心網友回復：
嘗試使用JSON將字串值決議為布林值：
var cookieCheck = $cookies.get('isDark'/span>) 。
if (cookieCheck === 'undefined') {
cookieCheck = false;
console.log（'COOKIE DOESNT EXIST'）。
} else {
console.log("COOKIE EXISTS")
//如果它存在，則決議其值。
cookieCheck = JSON.parse(cookieCheck)
//檢查其型別。
console.log(typeof cookieCheck)
// >> boolean。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310025.html
標籤：
上一篇：如何根據選擇更新單選按鈕組
下一篇：將資料從回應發送到html