在vue js中打开对话框时自动对焦输入

<template>
  <div>
    <button @click="openDialog">打开对话框</button>
    <dialog :open="dialogOpen">
      <input ref="inputField" type="text" />
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogOpen: false
    };
  },
  methods: {
    openDialog() {
      this.dialogOpen = true;
      this.$nextTick(() => {
        this.$refs.inputField.focus();
      });
    }
  }
};
</script>