NativeScript Vue - 将焦点放在 TextField 上

Question

我正在使用 NativeScript ("nativescript-vue": "^2.5.0") 在 iOS 13

上进行测试

"tns-android": {
      "version": "6.0.0"
    },
    "tns-ios": {
      "version": "6.0.1"
    }

尝试在点击按钮时将焦点设置在 TextField 上，目前看起来像这样

  <GridLayout dock="top" columns="auto,*,auto" width="70%" rows="auto,auto">
    <Label text.decode="&#xf2bd;" horizontalAlignment="left" row="0" rowSpan="2"  col="0" />
    <Label text="USER" horizontalAlignment="left" row="0" col="1" class="m-l-3" />
    <Label :text="userEditBtnText"  @tap="userEditTap()"  horizontalAlignment="right" row="0" rowSpan="2" col="2" class="btnEdit"/>
    <TextField ref="userid" text="@username" :editable="userEdit" horizontalAlignment="left" row="1" col="1" class="m-l-3"/>
  </GridLayout>

和@tap="userEditTap()"

的代码

userEditTap(){
  this.userEdit = true;
  this.userEditBtnText="SAVE";
  this.$refs["userid"].focus();      
}

我的控制台错误：

JavaScript error: file: node_modules/@nativescript/core/application/application.ios.js:312:26 JS ERROR Error: NativeScript encountered a fatal error: TypeError: this.$refs["userid"].focus is not a function. (In 'this.$refs["userid"].focus()', 'this.$refs["userid"].focus' is undefined)

欢迎任何意见！

Answer 1

当您通过 ref 访问时，您正在访问 Vue 元素，您必须调用 .nativeView 才能访问实际的 TextField。

应该是，

this.$refs["userid"].nativeView.focus();

NativeScript Vue - 将焦点放在 TextField 上

NativeScript Vue - set focus on TextField

javascript

vue.js

nativescript

nativescript-vue