Как сфокусировать v-radio-группу, выбранную радио программно?

Question

Как сфокусировать выбранную радиостанцию ​​v-radio программно?

<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

Попробуйте использовать пользовательскую директиву .Добавьте 'radio-focus' как директиву к экземпляру Vue Добавьте директиву v-radio-focus как атрибут к элементу v-radio, на котором вы хотите сфокусироваться.Подробнее о директивах здесь .

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

Answer 2

Две вещи

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