如何在vue.js中将焦点切换到图像组件之类的按钮上

Question

I have the following template in my vue.js application:

<div>
     <button class="button_text" @click="reset">Reset</button>
     <button class="button_text">Search</button>
     <image-component class="button_image_icon"/>
</div>

I am trying to set the tab focus on the <image-component> which is not a <button> but a Component with a label and input inside a <span> . It sets focus on the buttons easily but not sure how to do it on an button like image icon.

Tried: @click="setFocus" , didn't work.

Answer 1

You should be able to achieve it by adding the tabindex attribute to all the elements

<div>
     <button class="button_text" @click="reset" tabindex="1">Reset</button>
     <button class="button_text" tabindex="2">Search</button>
     <image class="button_image_icon" tabindex="3" />
</div>

Example with focus manually set with javascript: https://jsfiddle.net/qeugo6hm/5/