nativescript-vue dataform不更新源数据

Question

谁有人可以帮忙？

我有这个单页应用程序来显示问题：

如果您修改字段然后按顶部的“保存”，则控制台上不会显示更改的字段...

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

我意识到这几乎是一个基本的问题，我在互联网上搜索了一个答案，但找不到它......

在此先感谢您的帮助。问候，汉斯

Answer 1

RadDataForm使用起来有点棘手，因为它不会自动绑定数据，所以你必须添加一些事件来获取更改的数据。 初始数据用于创建表单，更改数据保存到另一个对象，因此您可以收听propertyCommitted事件并获取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);
  }
}

不知道这是否是在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