RadDataForm update example - vue.js

Question

I am looking for an example on the use of RadDataForm / Vue to update data in a vuex store. I have the data populating no problem, but I cannot find anywhere in the current documentation that explains how to trigger an update function when the data is updated. here is a simple example, how would I trigger the save() function when the data is updated and I click done in the form?
<StackLayout>
<StackLayout orientation="vertical" backgroundColor="lightgray">
<RadDataForm
:source="record"
/>
</StackLayout>
<script>
export default {
data() {}
},
methods:{
save(){
console.log('save')
},
}
computed:{
record (){
return this.$store.getters.record;
}
},
};
```

Answer 1

You just need to add a watcher to a local property, i recommend using mapState from Vuex.
You can have something like this:
computed: mapState({
record: this.$store.getters.record;
})
And also a watcher that sets a callback to a function, based on if a value has changed or not.
watch: {
record: function () {
// something to run when record changes
}
In summary, you have a local mapped variable from your store and a watcher that acts on whether the information has changed or not. Hope this helps
See: MapState Helper
See: Computed properties and watchers

Answer 2

Ok, I found the answer. This is not documented anywhere I can find in the nativescript/vue docs. I found: RadDataForm Commit Documentation. So, using that, I modified to (keeping mapState from Luis.) I added:
v-on:propertyCommitted="save" to RadDataForm
So, this works:
`<StackLayout>
<StackLayout orientation="vertical" backgroundColor="lightgray">
<RadDataForm
:source="record"
v-on:propertyCommitted="save"/>
</StackLayout>
<script>
export default {
data() {}
},
methods:{
save(){
console.log('save')
},
}
computed: mapState({
record(state){
return record = this.$store.getters.record;
}
};`

Answer 3

Here is a more detailed answer for this. obviously, I would set the store value in the save function.
<StackLayout>
<StackLayout orientation="vertical" backgroundColor="lightgray">
<RadDataForm
id="myDataForm"
:source="record"
v-on:propertyCommitted="save"/>
</StackLayout>
<script>
import { mapState } from 'vuex'
import { getViewById } from "tns-core-modules/ui/core/view";
export default {
data() {}
},
methods:{
save(){
console.log('save')
let data = args.object
var dataform = getViewById(data, "myDataForm");
console.log(dataform.editedObject)//<--updated Data Here
},
}
computed: mapState({
record(state){
return record = this.$store.getters.record;
}
};