i'm trying to set a ponent's data to a puted property value, as this fetches some localStorage data and manipulates it slightly.

I would then once the ponent is mounted listen for changes within the localStorage, and if my key is updated then fetch this value again, run it through my puted property and pass it back to the view.

However i'm getting 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 my ponent:

Vueponent('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:

Updated my code, getting the same error however when the storage change event is fired.

Edit 2:

Turns out my template was expecting toggle within my scope but I removed this from my $scopedSlots.

i'm trying to set a ponent's data to a puted property value, as this fetches some localStorage data and manipulates it slightly.

I would then once the ponent is mounted listen for changes within the localStorage, and if my key is updated then fetch this value again, run it through my puted property and pass it back to the view.

However i'm getting 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 my ponent:

Vue.ponent('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:

Updated my code, getting the same error however when the storage change event is fired.

Edit 2:

Turns out my template was expecting toggle within my scope but I removed this from my $scopedSlots.

• javascript
• vue.js
• local-storage
• puted-properties

• 1 You're using this inside the callback but it does not have the correct context. – Samuel Vaillant Commented Feb 20, 2019 at 12:05
• Crap, pletely forgot about that! – Martyn Ball Commented Feb 20, 2019 at 12:06
• Updated my code and still has same issue, updated post – Martyn Ball Commented Feb 20, 2019 at 12:07
• You got the exact same error even with the changes? – Samuel Vaillant Commented Feb 20, 2019 at 12:11
• @SamuelVaillant see updated post – Martyn Ball Commented Feb 20, 2019 at 12:23

2 Answers 2

You can use puted properties for this, but you'd have to define a getter and a setter.

puted: {
  fullName: {
    // getter
    get: function () {
      return localStorage.getItem('favourites')
    },
    // setter
    set: function (newValue) {
      localStorage.setItem('favourites', newValue)
    }
  }
}

Much cleaner imo than using the mounted callback, setting data and then watching for changes.

Computed properties work on data/props, so you can’t use them in data itself.

Instead, just set the default value of the data key to what’s in local storage:

data: function () {
    return {
        ids: function() {
            let favourites = localStorage.getItem('favourites');
            return favourites.split(',').filter(id => !!id);
        }
    };
}