Vue.js 如何使用vue show重置vue模式组件以使用自动对焦

我使用v-show选项制作了模态组件，如下所示

<registerModal v-show="register.etcCompanyVisible" />

第一次打开此模式时，自动对焦功能正常。 然后，通过将register.etccomappnyvisible更改为false，可以使用取消按钮关闭此模式

当我再次打开modal时，自动对焦不起作用。我认为它需要一些重置选项，但我不知道如何才能做到这一点。

---

你能给我一些建议吗？非常感谢您的阅读。

我的理解是，自动对焦属性仅在页面加载时可靠，因此您需要自己处理对焦事件

最简单的方法是在输入上加一个ref

<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>

请注意，您可以使用相同的方法以特定顺序动态聚焦输入。这是一个演示，使用按钮点击，但您可以轻松地使用它在满足特定条件后自动从一个输入移动到下一个输入

 <button class="btn secondary" v-on:click="etcCompanyVisibleClosed()">Cancel</button>

<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>

<template>
  ...
  <button @click="focusInput">launch modal</button>
  ...
</template>

<script>
  ...
  methods:{
     foucusInput() {
        this.$refs.companyName.focus();
     }
  }