Styjun

My code is similiar like here https://play.nativescript.org/?template=play-vue&id=TO4i2n&v=4

I need the values of RadDataForm to update Vuex state object which one is the source for RadDataForm.

So i wanted to do like this but no with single text field but with RadDataForm https://vuex.vuejs.org/guide/forms.html

Vuex Store:

const state = {
 items: 
 mainTab: 
 HPval: 10,
 MANA: 0,
 'type': '',
 ,

RadDataForm

 <StackLayout row="0">
 <RadDataForm
 :source="mainTab"
 @propertyCommitted="updateMessage"
 :metadata="mainTabMetadata">
 </RadDataForm>
 </StackLayout>

 computed: 
 ...mapState(
 mainTab: state => state.inputValues.items.mainTab,
 )

And on propertyCommited run method updateMessage. I need the value (text) of actualmodified field but there is no value. You can see I want to commit mutation to update state like here https://vuex.vuejs.org/guide/forms.html but I do not have value .

updateMessage (e) 
 console.log("PropertyCommitted");
 console.log(e);
 //console.log(e);
 //console.log(this.val);
 //console.dir(e.text);
 this.$store.commit('updateMessage', e.target.value) 
 ,

and this is mutation in store

updateMessage (state, data) 
 state.items = data
 console.log("PropertyCommitted mutation fired");
 

console log gives.

JS: object: RadDataForm(940) 
JS: editor: "undefined" 
JS: entityProperty: EntityProperty(958)
JS: propertyName: "MANA" 
JS: group: "undefined" 
JS: groupName: "DefaultGroup" 
JS: returnValue: "true"

On normal TextField I can use v-model and get value and commit mutation but how to work around with RadDataForms?

There is written https://docs.nativescript.org/ui/professional-ui-components/DataForm/GettingStarted/dataform-start-result

The other event - propertyCommitted - is called after the property is committed so you can use it to get the new value from the source object or through the RadDataForm's editedObject property.

https://docs.nativescript.org/ns-ui-api-reference/classes/raddataform#editedobject

How to use it?

Try this,

 updateMessage (e) 
 let property = data.object.getPropertyByName(data.propertyName);
 this.$store.commit('updateMessage', property.valueCandidate);
 ,