Vue Js Set Focus on Input

 
<html>
​
<head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
​
</head>
​
<body>
    <div id="app">
        <h3>Vue Js focus() Method</h3>
        <p>Set focus on Anchor tag(link) in Vue Js</p>
        <a ref='link' href="https://fontawesomeicons.com">fontawesomeicons.com</a> <br><br>
        <button @click="getFocus">Get Focus</button>
        <button @click="loseFocus">Lose Focus</button>
​
    </div>
    <script type="module">
        import { createApp } from "vue";
​
        createApp({
            methods: {
                getFocus() {
                    this.$refs.link.focus()
                },
                loseFocus() {
                    this.$refs.link.blur();
                }
            }
​
        }).mount("#app");
​
    </script>
    <style>
        a:focus,
        a:active {
            color: grey;
        }
    </style>
​
</body>
​
</html>