In my Vuejs app, I am working on a computed property to return a modified variable value based on a cookie timer.
The logic is straightforward - if the cookie doesn't exist, set the original value and also store it in another variable as a cached value to display. When the cookie is active and not expired, show the cached value from before.
Below is the code snippet:
export default {
name: 'app',
components: {
mainContr,
glasses,
watches
},
data() {
return {
glassKeys: ['blue', 'white', 'brown', 'yellow', 'black', 'small', 'big', 'medium'],
watchKeys: ['mechanical', 'moonphase', 'bluehands'],
glassItem: ''
}
},
computed: {
glasses() {
var cachedItem,
initialValue
if (!this.$cookie.get('stringSuffixs')) {
initialValue = this.glassKeys[Math.floor(Math.random()*this.glassKeys.length)]
cachedItem = initialValue
this.$cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '2m' })
return initialValue
} else {
return cachedItem
}
}
}
}
I suspect that the issue lies within variable scope and hoisting in relation to the immediate parent function, which in this case, is the computed property.