Trying to assign a computed property value to a component's data in order to fetch and manipulate localStorage data.
After mounting the component, I want to monitor changes in the localStorage. If my key is updated, I need to retrieve the new value, process it using the computed property, and display it on the view.
Encountering the following error:
ReferenceError: ids is not defined
at a.render (vue.js:4)
at a.e._render (vue:6)
at a.r (vue:6)
at un.get (vue:6)
at new un (vue:6)
at vue:6
at a.bn.$mount (vue:6)
at a.bn.$mount (vue:6)
at init (vue:6)
at vue:6
This is the code for my component:
Vue.component('favourites-button', {
render() {
return this.$scopedSlots.default({
count: this.ids.length
});
},
data: function() {
return {
ids: this.getFavourites()
}
},
mounted() {
const self = this;
Event.listen('favourites-updated', function (event) {
console.log('updated external');
});
window.addEventListener('storage', function (e) {
if (e.key === 'favourites') {
console.log('updated');
self.ids = self.getFavourites();
}
});
},
methods: {
getFavourites: function() {
let favourites = localStorage.getItem('favourites');
return favourites.split(',').filter(id => !!id);
}
}
});
Edit:
Made adjustments to my code but still facing the same error when the storage change event occurs.
Edit 2:
Discovered that my template was expecting toggle within the scope, despite removing it from my $scopedSlots.