nativescript-vue dataform does not update the source data

2
votes

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: '[email protected]',
                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

2
nativescriptnativescript-vue

2 Answers

5
votes

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: "[email protected]",
      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

0
votes

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;
        }
     };