Question

如何以编程方式聚焦选定无线电的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()，但没有任何反应。预先谢谢你

Answer 1

两件事

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)
  })
},

Answer 2

尝试使用custom directive。将“ radio-focus”作为指令添加到Vue实例将v-radio-focus指令作为属性添加到您要关注的v-radio元素。有关指令here的更多信息。

 'radio-focus': {
      // directive definition
      inserted: function (el) {
          const $el: HTMLElement = el.children[0].children[0] as HTMLElement
          $el.focus()
        }
      }

如何以编程方式聚焦选定无线电的v-radio-group？

2 个答案: