Блог

Мой код похож на приведенный здесьhttps://play.nativescript.org/?template=play-vueamp;id=TO4i2namp;v=4

Мне нужны значения RadDataForm для обновления объекта состояния Vuex, который является исходным для RadDataForm.

Итак, я хотел сделать вот так, но не с одним текстовым полем, а с RadDataFormhttps://vuex.vuejs.org/guide/forms.html

Хранилище Vuex:

 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,
         })
}
  

И в propertyCommited запустите метод updateMessage. Мне нужно значение (текст) фактического измененного поля, но там нет значения. Вы можете видеть, что я хочу зафиксировать мутацию для обновления состояния, как здесьhttps://vuex.vuejs.org/guide/forms.html но у меня нет значения.

 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) 
         },

  

и это отложенная мутация

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

выдает журнал консоли.

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

В обычном текстовом поле я могу использовать v-model и получать значение и фиксировать мутацию, но как обойти RadDataForms?

Там написано https://docs.nativescript.org/ui/professional-ui-components/DataForm/GettingStarted/dataform-start-result

Другое событие — propertyCommitted — вызывается после фиксации свойства, поэтому вы можете использовать его для получения нового значения из исходного объекта или через свойство editedObject RadDataForm.

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

Как это использовать?

Попробуйте это,

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