NativeScript Vue - 将焦点放在 TextField 上答案

【问题标题】：NativeScript Vue - set focus on TextFieldNativeScript Vue - 将焦点放在 TextField 上
【发布时间】：2020-07-04 12:11:31
【问题描述】：

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

"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 错误：文件： node_modules/@nativescript/core/application/application.ios.js:312:26 JS ERROR 错误：NativeScript 遇到致命错误：TypeError： this.$refs["userid"].focus 不是函数。（在 'this.$refs["userid"].focus()', 'this.$refs["userid"].focus' 是未定义）

感谢任何意见！

【问题讨论】：

标签： javascript vue.js nativescript nativescript-vue

【解决方案1】：

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

应该是，

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

【讨论】：

谢谢，在标签上点击两次才能获得焦点，但我现在可以忍受这个！关于可能导致这种行为的任何见解？我试过this.$refs["userid"].nativeView.focus(); this.$forceUpdate();，但似乎没有效果。
我不确定，如果您可以共享 Playground 示例，那么调试起来很容易。
当然，检查一下play.nativescript.org/?template=play-vue&id=Pnlbwc 如果您在该字段变为可编辑但未聚焦时点击编辑，当您再次点击它时，它应该聚焦
您粘贴了链接吗？还要确认您在哪个平台和设备上运行测试。
这是因为您将 userEdit 标志绑定到 TextField 的 editable 属性，该属性最初设置为 false。在您第一次单击时，您切换标志，但更改检测周期在此之后运行，并且需要一段时间才能编辑文本字段。因此，焦点第一次不起作用。等待可编辑属性更改（使用属性更改侦听器）或更新可从 JS 编辑的文本字段，而不是模型绑定，这样更改将立即生效并立即响应焦点。