Vue.js 如何为此设置false/true。$refs.focus（）；在vuejs中

我需要使用

$refs

更改焦点， 但我看到了这个错误

[Vue warn]：呈现错误：“TypeError:无法读取未定义的属性“focus”

TypeError:无法读取未定义的属性“focus”

导出默认值{
计算：{
openTest（）{
如果（this.$refs.FocusOrderDelivery.focus（）==true）{//err错误状态为渲染中的
错误
-这很可能是时间问题。我在官方文档中发现了这一部分：

我猜同样的事情也适用于计算属性。尝试删除
openTest
computed属性，看看它是否有用

聚焦/非聚焦输入

由于
focus
是一种在DOM元素上设置焦点的方法，因此不能简单地将此状态设置为true或false。使用
focus（）
进行聚焦，使用
blur（）
取消聚焦。通过单击按钮进行此操作应该完全可以。（）

使用数据道具跟踪焦点状态

由于无法通过$ref直接获取元素的焦点状态，所以最好将焦点状态外包到另一个数据道具中，并在元素聚焦/未聚焦（模糊）时进行更新。Vue有2个事件可用于此：
v-on:focus
和
v-on:blur


导出默认值{
数据（）{
返回{
isFocus:false
}
},
方法：{
设置焦点（bool）{
this.isFocus=bool；
}
}
}

也很有趣

您可能对这个方法感兴趣。
对于您的实际目的，您可以将大部分焦点检查保留在图片之外

编辑：没有任何“好”的方法可以知道一个字段是否真正是通过
$refs
来聚焦的，因此我采用了下面的方法

您可以更好地使用
@focus
和
@blur
，然后仅使用
$refs
来实际聚焦字段：

<template>
  <div>
    <button @click="retFlase">
      barcode
      {{ hasFocus }}
    </button>
    <input
      class="nothing"
      @focus="hasFocus = true"
      @blur="hasFocus = false"
      ref="FocusOrderDelivery"
      href="javascript:void(0)"
    >
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      hasFocus: false
    };
  },
  methods: {
    retFlase() {
      this.$refs.FocusOrderDelivery.focus();
    }
  }
};
</script>


条形码
{{hasFocus}}
导出默认值{
数据：函数（）{
返回{
hasFocus:错误
};
},
方法：{
retFlase（）{
这是.refs.FocusOrderDelivery.focus（）；
}
}
};

工作沙盒：
是否只希望焦点从输入字段开始？还是仅在单击按钮时才开始？@Mm.Mirzaei.dev可能是一个时间问题。从文档中可以看出：由于ref本身是作为渲染功能的结果创建的，因此您无法在初始渲染时访问它们-它们还不存在！$refs也是不可访问的因此，您不应尝试在模板中使用它进行数据绑定。请尝试删除
openTest（）
属性，然后重试。该错误还表示呈现中的
错误，因此可能是that@Mm.Mirzaei.dev请看我的答案，如果对你有帮助，请接受！谢谢
<template>
  <div>
    <button @click="retFlase">
      barcode
      {{ hasFocus }}
    </button>
    <input
      class="nothing"
      @focus="hasFocus = true"
      @blur="hasFocus = false"
      ref="FocusOrderDelivery"
      href="javascript:void(0)"
    >
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      hasFocus: false
    };
  },
  methods: {
    retFlase() {
      this.$refs.FocusOrderDelivery.focus();
    }
  }
};
</script>