[Vuejs]-Vue.js – Transfer focus to component

by

0👍

I think what’s needed is for your form component to have something defined for when it’s mounted:

Vue.config.productionTip = false;
const template = `<div>
    <div>
      <inner v-if="showInner" />   
      <button @click="toggle">Toggle inner component</button>
    </div>
</div>`
const inner = {
  name: 'inner',
  template: '<form><input ref="textInput" type="text"/></form>',
  mounted() {
    this.$refs.textInput.focus()
  }
};
new Vue({
  template,
  data: function() {
    return {
      showInner: false
    };
  },
  methods: {
    toggle() {
      this.showInner = !this.showInner;
    }
  },
  components: {
    inner
  }
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Leave a comment