如何重置与 vue-show 一起使用的 vue 模态组件以使用自动对焦答案

【问题标题】：How to reset vue modal component working with vue-show to use autofocus如何重置与 vue-show 一起使用的 vue 模态组件以使用自动对焦
【发布时间】：2019-08-08 05:05:45
【问题描述】：

我使用下面的v-show 选项制作了模态组件。

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

因此，当register.etcCompanyVisible 为true 时，会出现此模态。
这个模态有一些像这样的输入。

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

第一次打开此模态时，自动对焦效果很好。
然后，可以通过将register.etcComapnyVisible 更改为false 来使用取消按钮关闭此模式。

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

当我再次打开 modal 时，自动对焦不起作用。我认为这个模式需要一些重置选项，但我不知道如何完成。你能给我一些建议吗？非常感谢您的阅读。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

我的理解是autofocus属性只在页面加载时可靠，所以需要自己处理焦点事件。

最简单的方法是在您的输入上放置一个 ref。

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

然后当你启动你的模式时，也许你正在使用一个按钮，把焦点放在那个$ref上。

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

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

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

【讨论】：