uview使用输入框:foucs控制焦点问题?

Question

我需要实现的效果是，第一个输入框自动获取焦点，点回车后，验证内容，通过则解除第二个输入框禁止状态并聚焦

出现问题：第二个聚焦了但是直接又失焦了

<u-form-item label="盛具条码:">
          <u-input
            v-model.trim="formData.containerCode"
            :focus="firstFocus"            @keydown.enter.native="validateContainerCode"
          />
          <u-icon
            name="scan"
            size="30"
            @click="() => scanCode('containerCode')"
          />
          <u-checkbox-group slot="right">
            <u-checkbox v-model="isRepair" label="返修下线"></u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="产品条码:">
          <u-input
            ref="productCodeRef"
            v-model.trim="formData.productCode"
            :focus="secondFocus"
            :disabled="productDisabled"
            @keydown.enter.native="validateProductCode"
          />
          <u-icon
            name="scan"
            slot="right"
            size="30"
            @click="() => scanCode('productCode')"
          />
        </u-form-item>

   validateContainerCode() {
      this.firstFocus = false
      if (!this.formData.containerCode) {
        this.firstFocus = true
        // setTimeout(() => {
        //   this.firstFocus = true
        // }, 0)
        return uni.$u.toast('盛具码不能为空')
      }
      // this.getList()
      this.productDisabled = false
      this.$nextTick(() => {
        this.secondFocus = true
      })
    },

Answer 1

<u-form-item label="盛具条码:">
  <u-input
    v-model.trim="formData.containerCode"
    ref="containerCodeRef"
    @keyup.enter.native="validateContainerCode"
  />
  <!-- 其他代码 -->
</u-form-item>
<u-form-item label="产品条码:">
  <u-input
    ref="productCodeRef"
    v-model.trim="formData.productCode"
    :disabled="productDisabled"
    @keyup.enter.native="validateProductCode"
  />
  <!-- 其他代码 -->
</u-form-item>

methods: {
  validateContainerCode(event) {
    event.preventDefault();
    if (!this.formData.containerCode) {
      this.$refs.containerCodeRef.focus();
      return uni.$u.toast('盛具码不能为空');
    }
    // this.getList()
    this.productDisabled = false;
    this.$nextTick(() => {
      this.$refs.productCodeRef.focus();
    });
  },
}

Answer 2

1.secondFocus每次聚焦前都要将它设为false；
2.回车事件改成@confirm试试;
3.还是不行的话看下validateProductCode内部有没有做一些失焦的操作