有人可以帮忙吗?
我有这个一页应用程序来显示问题:
如果您修改字段,然后按顶部的“保存”,则更改后的字段不会显示在控制台上...
<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: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c9cccbcde3c0ccced3c2cdda8dc0ccce" rel="noreferrer noopener nofollow">[email protected]</a>',
city: 'New York',
street: '5th Avenue',
streetNumber: 11,
},
};
},
methods: {
saveScreen() {
console.log('=======personName: ' + JSON.stringify(this.person))
}
}
}
</script>
<style>
</style>
我意识到这几乎是一个基本问题,我在互联网上搜索答案但找不到......
预先感谢您的帮助。 问候, 汉斯
最佳答案
RadDataForm
使用起来有点棘手,因为它不会自动绑定(bind)数据,因此您必须添加一些事件来获取更改的数据。
初始数据用于创建表单,更改数据将保存到另一个对象,以便您可以监听 propertyCommissed
事件并获取 editedObject
。
<RadDataForm :source="person" @propertyCommitted="onPropertyCommitted" />
data() {
return {
person: {
name: "John",
age: 23,
email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aaafa8ae80a3afadb0a1aeb9eea3afad" rel="noreferrer noopener nofollow">[email protected]</a>",
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
关于nativescript-vue dataform 不更新源数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54605451/