0

我有一个简单的页面，它使用 RadListView 生成 X 个 TextField，您可以在其中插入人员姓名。

您可以按添加按钮（在 RadListView 使用的数组中推送新项目）来生成新字段或删除按钮（拼接数组）来删除一个。

问题是，当我按下 RadListView 生成的字段之一并尝试键入内容时，该字段上的焦点立即移动到页面顶部的字段（唯一不是由 RadListView 生成的字段）。

请参阅在模拟器上拍摄的这个 gif（但问题也在真实设备上）： 模拟器的 gif

完整代码：

<template>
  <Page>  
    <GridLayout columns="*" rows="auto,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>

谢谢您的帮助！

4

0 回答 0