如何解决Nativescript Vue - 当输入
我有一个简单的页面,它使用 RadListView 生成 X 个文本字段,您可以在其中插入人名。
您可以按添加按钮(在 RadListView 使用的数组中推送新项目)生成新字段或按删除按钮(拼接数组)删除一个。
问题是,当我按下 RadListView 生成的字段之一并尝试输入内容时,该字段的焦点会立即移动到页面顶部的字段上(唯一不t 由 RadListView 生成)。
在模拟器上看到这个 gif(但问题也是在真实设备上): gif of the emulator
完整代码:
<template>
<Page>
<GridLayout columns="*" rows="auto,auto,*,auto">
<Label row="0" text="total amount"/>
<TextField row="1" v-model="payment.total" keyboardType="number"/>
<RadListView row="2" layout="linear" orientation="vertical" for="item in payment.persons">
<v-template>
<GridLayout columns="*" rows="*,*" class="person">
<Label row="0" :text="'person name ' + ($index+1)" />
<TextField row="1" v-model="item.name" />
<Button row="2" text="Delete person" @tap="deletePerson($index)"/>
</GridLayout>
</v-template>
</RadListView>
<Button row="3" text="Add person" @tap="addPerson()" />
<Button row="4" text="Save" @tap="validateForm()" />
</GridLayout>
</Page>
</template>
<script>
export default {
data() {
return {
payment:{
total:10,persons: [{
name:"test1"
}]
}
}
},methods:{
addPerson(){
this.payment.persons.push({
name:""
});
},deletePerson(index){
this.payment.persons.splice(index,1);
},validateForm(){
console.log(this.payment.persons);
}
}
}
</script>
<style scoped>
.person{
margin-top:50px;
background-color: rgb(231,231,231);
border-radius: 10px;
padding: 40px 10px;
margin-bottom: 50px;
}
</style>
感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。