【Vue】inputタグのDisabledの値を切り替えた時に再フォーカスをしたい。

Question

いつもお世話になります。

vueを使ってアプリケーションを開発しています。
inputタグの状態をDisabledで切り替えているのですが、切り替えた後に再度同じinputタグにフォーカスする方法についてご教示ください。

##概要
以前投稿したものと重複しますが、下記のようなフォームを作っています。
フォームでTodoを登録し、登録したものも含めて一覧で表示するとします。

API経由でデータを保存して、保存したデータを含めて表示用に加工された一覧データを取得して更新します。
その場合、APIにリクエストするのは下記の２つを順番に処理します。

1. データベースにデータを追加
2. データ一覧を更新

##実現したい事
APIで通信中はDisabledで入力を禁止し、通信完了後inputを解除するという事をして、解除後に再度inputにフォーカスさせたいです。

##ソース
下記のようなコンポーネントを用意しました。
APIの通信の処理は省略しますが、addTodo()内でAPI経由で登録後、finallyの最後にフォーカスをinputに戻す処理をする想定です。

<template>
<div>
  <div class="form-group row justify-content-center">
    <input
      class="form-control col-sm-10"
      type="text"
      name="body"
      ref="todo_form"
      :disabled="processing"
    />
    <button
      class="btn btn-primary2 col-sm-2"
      type="button"
      @click="addTodo"
    >送信する</button>
  </div>

  <div class="row justify-content-center">
    <div class="col-11">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="th-time">時間</th>
              <th class="th-name">内容</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="todo in todos">
              <td>{{ todo.created_at }}</td>
              <td>{{ todo.text }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "TodoComponent",
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      body: '',
      todos: [],
      processing: false
    }
  },
  methods: {
    // todo追加
    addTodo() {
      if(this.processing) {
        return false;
      }
      // プロセスを始める
      this.processing = true;

      let self = this;
      let data = {
        body: this.body
      };

      let url = 'http://api.example.com/api/todos';
      axios.post(url, data)
        .then(async function(){
          await self.getTodos()
        })
        .catch(function(e){
          console.log('error');
        })
        .finally(function() {
          self.processing = false;
          // inputにフォーカスを当てたい
          // self.processing自体もfalseに変わっているがフォーカスが当たらない
          self.$ref.todo_form.focus()
        });
    },

    // 一覧取得
    getTodos() {
      let self = this;
      let url = 'http://api.example.com/api/todos';

      axios.get(url, {
        headers: {
          "Content-Type": "application/json"
        },
        data: {}
      })
      .then(function(result){
         // 一覧を更新 
         self.todos = result.data.todos;
      })
      .catch(function (e) {
        console.error(e);
      })
    },
  }
  mounted() {
    // 読み込み時に最新の一覧を取得しておく
    this.getTodos();
  },
}
</script>

現状

Disabledで入力禁止・解除自体は実装できているのですが、フォーカスをinputに戻す処理が動きません。
試しに、mounted()でthis.$ref.todo_form.focus()で動作自体するか確認してみたのですがフォーカスはされます。

Disabledのコールバックイベントのようなものがあるのでしょうか？

Answer 1

自己解決しました。
解決方法は、$nextTickを使う事でした。

自信はありませんが、nextTickを使う事でdisabledで入力状態を切り替わるのを待つ事ができたためだと思われます。

        .finally(function() {
          self.processing = false;
          self.$nextTick(function(){
            self.$refs.todo_form.focus();
          });
        });