I’ve been struggling to get to the bottom of an issue I’m having. I’m basically trying to cache an image in pageInit on one of my pages and then store the local file reference using app.form.storeFormData(). Here is an example of what I’m doing…
<template>
<div class="page">
<img src="{{if data.imagelocal}}{{data.imagelocal}}{{else}}{{data.image}}{/if}}" >
</div>
</template>
<script>
return {
data: function () {
return {
data: app.form.getFormData('storage'),
}
},
methods: {
cacheImage: function (img) {
var self = this, app = self.$app, data = self.data;
if(data.imagelocal !== undefined) return;
ImgCache.isCached(img, function(path, success) {
if (success) {
console.log('already cached : we should never see this log');
} else {
ImgCache.cacheFile(path, function (localpath) {
console.log('adding cache image : '+localpath);
data.imagelocal = localpath;
app.form.storeFormData('storage', data);
});
}
});
}
},
on: {
pageInit: function() {
const self = this, data = this.data;
self.cacheImage(data.image);
},
}
}
</script>
I’ve been poking it for days and have come to realise that if I change the form id from storage to test it works… but I cannot see why. I’ve written the whole of my app based on methods using the id storage.
Is this a namespace clash, a scoping problem or something else I’m overlooking?