refを用いたフォーカス処理がうまく動かない。[ step04-3-a.html ]

[ktguy0723]

初めまして。
いきなり質問なのですが、sample-code/step04/step04-3-a.htmlにて
リストを2個以上登録後、一番下以外のニックネームを変更しようとすると、選択したinputフォームにフォーカスされません。
（どこを選択しても一番下がフォーカスされているようです）

また、上記の実装を見ると、引数で渡しているindexを使用していない点が気になりました。
公式ガイド見てもフォーカスの方法がわからなかったので何かわかれば教えていただきたいです。

// ...
edit: function(user, index) {
    user.editable = true;
    this.$nextTick(() => {
         this.$refs.editNickname.focus();
    });
}

[ha6-6ru]

@ktguy0723 はじめまして。フィードバックありがとうございます。

次のbreaking changesの影響で、Vue 3.xでrefsにおける配列の扱いで考慮が必要になりました。
step4においてVue 3.xの変更内容を反映できていませんで、大変ご迷惑をおかけしました。
v-for Array Refs

書籍ではここから先、繰り返し描画される要素を対象にコンポーネント化していきますので、配列として扱う必要が無くなり、このbreaking changesの影響を受けません。

Vue 3.xにおける対応としては、次のようになります。

1. dataオプションにrefを指定した要素の配列を受け取るプロパティを用意する
2. :ref に変更して上記プロパティを設定するメソッドを指定する

修正後のコードは基本的に公式ドキュメントと同じ形式になりますが、次の通りです。

<input v-show="user.editable" v-model="user.nickname" @blur="user.editable = false" :ref="setEditNicknameRef">

data: () => ({
  users: [],
  nickname: '',
  email: '',
  nicknameFilter: '',
  editNicknames: [],
}),
methods: {
  setEditNicknameRef: function(el) {
    if (el) {
      this.editNicknames.push(el)
    }
  },

this.$nextTick(() => {
  // DOM更新後に実行
  this.editNicknames[index].focus();
});

beforeUpdate() {
  this.editNicknames = []
},

[ktguy0723]

@ha6-6ru 返信ありがとうございます。
無事動きました！勉強になりました。

また、何かありましたらどうぞよろしくお願いします。

[ha6-6ru]

v-for Array Refs
リンク切れ。以下の通り、削除された模様。
vuejs/v3-migration-guide#10

v3.2.25からまた配列で扱えるようになった。
Refs inside v-for