时间戳

首页 > 解决方案 > 如何以编程方式聚焦 v-radio-group 选择的电台？

vue.js - 如何以编程方式聚焦 v-radio-group 选择的电台？

问题描述

如何以编程方式聚焦 v-radio-group 选择的电台？

<v-radio-group v-model="radios" :mandatory="false" ref="RadioGroup">
  <v-radio label="Radio 1" value="radio-1"></v-radio>
  <v-radio label="Radio 2" value="radio-2"></v-radio>
</v-radio-group>

我试过了，this.$refs.RadioGroup.focus()但没有任何反应。先感谢您

标签： vue.jsvuejs2vuetify.js

解决方案

两件事情

  • Vuetify 将 div 和输入添加到 DOM，因此您需要深入了解引用元素的子元素

  • 您可能想要定位其中一个单选按钮，因为聚焦该组似乎没有效果

这行得通，所以可能会给你一个想法

<v-radio-group v-model="radios" :mandatory="false" ref="RadioGroup">
  <v-radio label="Radio 1" value="radio-1" ref="Radio1"></v-radio>
  <v-radio label="Radio 2" value="radio-2" ref="Radio2"></v-radio>
</v-radio-group>

this.$refs.Radio2[0].$el.children[0].children[0].focus()

用这个监听器测试

created() {
  document.addEventListener('focusin', event => {
    console.log('focused', event.target)
  })
},

推荐阅读