Question

我需要用$refs来改变重点，但我看到了这个错误。

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'focus'”

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

export default {
  computed: {
    openTest() {
      if (this.$refs.FocusOrderDelivery.focus() == true) { // err <== 
        return true
      } else {
        return false
      }
    }
  },
  methods:{
    retFlase() {
      this.$refs.FocusOrderDelivery.focus();
    }
  }
}

<template>


  <button
    @click="retFlase"
    >
    barcode
    {{openTest}}
  </button>
  <input
    class="nothing"
    ref="FocusOrderDelivery"
    href="javascript:void(0)"
  />
</template>

这是实时错误。$ refs.focus（） enter image description here

Answer 1

错误状态为Error in render-这很可能是时间问题。我在官方文档中找到了这件作品：https://vuejs.org/v2/api/index.html#ref

An important note about the ref registration timing:
because the refs themselves are created as a result of the render function,
you cannot access them on the initial render - they don’t exist yet!
$refs is also non-reactive, therefore you should not attempt to use
it in templates for data-binding.

我猜这同样适用于计算属性。尝试删除openTest计算属性，看看是否有帮助！

焦点/散焦输入

由于focus是一种将焦点放在DOM元素上的方法，因此不能简单地为此状态设置true或false。使用focus()聚焦和blur()聚焦。通过单击按钮执行此操作应该完全正常。（https://www.w3schools.com/jsref/met_html_blur.asp）

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

由于您不能直接通过$ ref获得元素的焦点状态，因此最好将焦点状态外包给另一个数据属性，并在元素获得焦点/未聚焦（模糊）时对其进行更新。您可以使用Vue hast 2事件：v-on:focus和v-on:blur。

<template>
<div>
  <input v-on:focus="setFocus(true)" v-on:blur="setFocus(false)" />
</div>
</template>

<script>
  export default {
    data() {
      return {
        isFocus : false
      }
    },
    methods: {
      setFocus(bool) {
         this.isFocus = bool;
      }
    }
  }
</script>

也很有趣

只是为解决这个问题而苦苦寻找DOM中当前关注的元素：https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement，这可能对您很有趣。

Answer 2

出于您的实际目的，您可以将所有焦点检查中的大部分留在图片之外。

编辑：使用$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>

工作沙箱：https://codesandbox.io/s/hungry-bhaskara-hxuc3

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

2 个答案: