nativescript-vue dataform does not update the source data - nativescript

Question

anyone can help?
i have this one page app to show the problem:
if you modify a field and then press 'save' at the top the changed field is not shown on the console...
<template>
<Page>
<ActionBar>
<Label text="SAVE" #tap="saveScreen()" />
</ActionBar>
<StackLayout>
<RadDataForm :source="person"/>
</StackLayout>
</Page>
</template>
<script>
export default {
data () {
return {
person: {
name: 'John',
age: 23,
email: 'john#company.com',
city: 'New York',
street: '5th Avenue',
streetNumber: 11,
},
};
},
methods: {
saveScreen() {
console.log('=======personName: ' + JSON.stringify(this.person))
}
}
}
</script>
<style>
</style>
i realize this is pretty much a basic question, i searched the internet for an answer however could not find it...
thanks in advance for your help.
Regards,
Hans

Answer 1

RadDataForm is a little bit tricky to work with since it doesn't bind data automatically so you'll have to add some events to get changed data.
Initial data is used to create form and on change data is saved to another object so you can listen to propertyCommitted event and get editedObject.
<RadDataForm :source="person" #propertyCommitted="onPropertyCommitted" />
data() {
return {
person: {
name: "John",
age: 23,
email: "john#company.com",
city: "New York",
street: "5th Avenue",
streetNumber: 11
},
committedPerson: {}
};
},
methods: {
onPropertyCommitted (data) {
this.committedPerson = data.object.editedObject
},
saveScreen () {
console.log(this.committedPerson);
}
}
Don't know if this is the best way to do it in Vue but I see that there are open issues on github regarding this and some workarounds are posted but none for Vue.
It should be explained better in official docs.
Here is working example https://play.nativescript.org/?template=play-vue&id=98Xyjv&v=5
And here you can find some examples on validation, grouping etc.https://github.com/telerik/nativescript-ui-samples-vue/tree/master/dataform/app/examples

Answer 2

Here is my answer for this. Look at 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;
}
};