Example on loading data into model

[michaelsorich]

Hi,

vue-contextable looks interesting - is it possible to get some guidance on best practice for loading/populating data into a model (e.g. json object returned from a get call to a web api). There appears to be a function 'populate(data)' defined for the document object in the objectschema package which may work but it does not seem to be available via this.{datakey}.$populate().

Any pointers would be appreciated.

Thanks,

Michael

[Kristijan Sedlak]

Hey!

The this.{datakey}. holds an instance of a Model and all the available model methods are actually provided by the contextable.js framework. This plugin adds some reactive methods (prefixed with $) which automatically execute this.$forceUpdate() command thus the Vue re-renders your form when a model changes.

Best practice for loading data (e.g. edit user page) would be within beforeCreate hook. First, you should add an instance method for populating user model into you contextable.js schema and then run it into the beforeCreate hook.

I'm finishing the example here and it should be ready by tomorrow.

[Kristijan Sedlak]

Example:

<template>
...
</template>

<script>
export default {
  contextable: {
    ...
  },
  methods: {
    ...
  },
  beforeCreate () { // or beforeMount or other hook
    this.user.populate({name: 'John Smith'});
    // this.user.myInstanceMethodDefinedInSchema(); -> preferred
  }
}
</script>

[Kristijan Sedlak]

I've completed the vue-example so I'm closing this issue. Please let me know if the you need any further information on this.

[michaelsorich]

Thanks. Exactly what I was looking for.

I have not yet understood all the concept in vue-example but a related issue was how to convert the model instance to a json object for posting to a rest api. I found some code (e.g. JSON.parse(JSON.stringify(this.user))) for doing this that may be worth including in the getting started section, presuming this is the best way to do this.