Форма данных nativescript-vue не обновляет исходные данные - PullRequest
Новая
       11

Форма данных nativescript-vue не обновляет исходные данные

0 голосов
/ 09 февраля 2019

кто-нибудь может помочь?

У меня есть это одностраничное приложение, чтобы показать проблему:

если вы измените поле и затем нажмите «сохранить» вверху, измененное поле не отображаетсяна консоли ... 

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

я понимаю, что это довольно простой вопрос, я искал в интернете ответ, но не смог его найти ...

заранее спасибо затвоя помощь.С уважением, Ганс

1 Ответ

0 голосов
/ 11 февраля 2019

RadDataForm немного сложнее в работе, поскольку он не связывает данные автоматически, поэтому вам придется добавить некоторые события, чтобы получить измененные данные.
Исходные данные используются для создания формы и данных об измененияхсохраняется в другом объекте, поэтому вы можете прослушать событие propertyCommitted и получить 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);
  }
}

Не знаю, является ли это лучшим способом сделать это в Vue, но я вижу,что на github есть открытые проблемы, связанные с этим, и опубликованы некоторые обходные пути, но ни одного для Vue.
Это лучше объяснить в официальных документах.

Вот рабочий пример https://play.nativescript.org/?template=play-vue&id=98Xyjv&v=5

А здесь вы можете найти примеры валидации, группировки и т. Д.
https://github.com/telerik/nativescript-ui-samples-vue/tree/master/dataform/app/examples

...