RadDataForm 更新示例答案

【问题标题】：RadDataForm update exampleRadDataForm 更新示例
【发布时间】：2019-02-12 00:50:02
【问题描述】：

我正在寻找有关使用 RadDataForm / Vue 更新 vuex 存储中的数据的示例。我的数据填充没有问题，但我在当前文档中找不到任何地方解释如何在数据更新时触发更新功能。这是一个简单的例子，当数据更新并在表单中单击完成时，我将如何触发 save() 函数？

  <StackLayout>
            <StackLayout orientation="vertical" backgroundColor="lightgray">
             <RadDataForm 
                :source="record"
                 />
   </StackLayout>
   <script>
    export default {
        data() {}
        },
        methods:{
         save(){
             console.log('save')
            }, 
        }
        computed:{
            record (){
                return this.$store.getters.record;
            }
        },
     };
```

【问题讨论】：

标签： vue.js nativescript-telerik-ui

【解决方案1】：

你只需要在本地属性中添加一个观察者，我推荐使用 Vuex 的 mapState。

你可以有这样的东西：

  computed: mapState({
    record: this.$store.getters.record;
  })

还有一个观察者，它根据值是否已更改，为函数设置回调。

  watch: {
    record: function () {
     // something to run when record changes
    }

总而言之，您有一个来自商店的本地映射变量和一个观察者，该观察者根据信息是否已更改。希望这会有所帮助

See: MapState Helper See: Computed properties and watchers

【讨论】：

谢谢。更改计算以记录 (state){...} 每个链接以访问 this.$store... 但观察者没有注册更改。我认为 RadDataForm 没有将更改设置为记录对象。 RadDataForm 是否需要一个操作或更多操作？

【解决方案2】：

好的，我找到了答案。这在我可以在 nativescript/vue 文档中找到的任何地方都没有记录。我发现：RadDataForm Commit Documentation。因此，使用它，我修改为（保留 Luis 的 mapState。）我补充说：

v-on:propertyCommitted="save" 到 RadDataForm

所以，这行得通：

 `<StackLayout>
            <StackLayout orientation="vertical" backgroundColor="lightgray">
             <RadDataForm 
                :source="record"
                 v-on:propertyCommitted="save"/>
   </StackLayout>
   <script>
    export default {
        data() {}
        },
        methods:{
         save(){
             console.log('save')
            }, 
        }
        computed: mapState({
        record(state){
            return record = this.$store.getters.record;
        }
     };`

【讨论】：

【解决方案3】：

这里有一个更详细的答案。显然，我会在保存函数中设置存储值。

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

【讨论】：