nativescript-vue dataform 不更新源数据答案

【问题标题】：nativescript-vue dataform does not update the source datanativescript-vue dataform 不更新源数据
【发布时间】：2019-07-03 11:10:08
【问题描述】：

有人可以帮忙吗？

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

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

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

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

提前感谢您的帮助。问候，汉斯

【问题讨论】：

标签： nativescript nativescript-vue

【解决方案1】：

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

【讨论】：

感谢您的努力并创建了这个工作示例......但是这个示例也有同样的问题。请启动应用程序，更改表单中的字段并按保存，控制台日志显示未更改的字段。
我想把表单修改后的数据发送到服务器，请问哪里可以找到修改后的数据？
哦，很抱歉一开始没有得到您的问题。我更新了我的答案
还有一个问题是data.object.editedObject的格式，它是字符串化的JSON表示，所以this.committed person.name不起作用。要将其恢复为 json 格式，请使用：this.committedPerson = JSON.parse(data.object.editedObject)
但是，如果用户没有修改输入，propertyCommitted 将不会被触发，this.committedPerson 是 {}...

【解决方案2】：

这是我对此的回答。看看保存功能。

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

【讨论】：