Hi all!
For those unfamiliar with VueJS, it can be extremely useful to get/set properties on data, such as setting ‘Name’.
e.g:
data() {
monster: new Parse.Object();
}
<input v-model="monster.Name" placeholder="monsterName"/>
<button @click="monster.save()"/>
However, the get/set is all done via dot notation, meaning that Parse Objects have to be converted toJSON first, and then back, which can make the code longer than needed.
The alternative is to set properties directly via subclassing. (I have also tried with Proxy
but VueJS already uses Proxy
internally so it doesn’t work as expected)
class Monster extends Parse.Object {
constructor() {
super('Monster');
this.loadData();
}
loadData() {
const internal = ['id','className','createdAt','updatedAt', 'ACL']
const data = this.attributes;
for (const key in data) {
if (internal.includes(key)) {
continue;
}
this[key] = data[key]; // is this dangerous
}
}
async save() {
const internal = ['id','className','createdAt','updatedAt', 'ACL']
for (const key in this) {
if (internal.includes(key)) {
continue;
}
if (this.get(key) !== this[key]) {
this.set(key, this[key]);
}
}
await super.save();
}
_finishFetch(serverData) {
super._finishFetch(serverData);
this.loadData();
}
}
It might be a bit of a trivial question: but are there any risks with setting properties directly on a Parse.Object this way?
Thanks in advance