Vue.jsで、v-focusを特定条件のときだけ付与したい

Question

Vue.jsにて、v-forループでinput要素を複数描画しているのですが、
その最初の要素にだけv-focusを付与したいのですが、適切な書き方を教えて下さい。

以下のコードのv-focusを、key==0のときだけ付与したいです。
どのように条件を書けばよいでしょうか？

<ul>
<li v-for="(val, key) in models">
<input type="text" v-model="abc" v-focus />
</li>
</ul>

今自分では、

<ul>
<li v-for="(val, key) in models">
<input type="text" v-model="abc" v-focus v-if="key==0" />
<input type="text" v-model="abc" v-if="key!=0" />
</li>
</ul>

こんな書き方をしていて、きれいに書きたいです。

v-focusは、

root.Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
 }
});

これです。

Comments

[sousuke]

v-focusはカスタムディレクティブだと思います。その関数部分を提示したほうがいいのでは？

[jammer]

ご指摘ありがとうございました。

Answer 1

改善方法の1例ですが参考になれば幸いです。

この例ではv-focusディレクティブを下記のように修正します。
コードの通りsetという引数を取るようにします。（引数名はなんでもいいです）
そして引数の値がundefinedかtrueの場合にフォーカスするようにします。

Vue.directive('focus', {
  inserted: function (el, binding) {
    if (binding.arg === 'set') {
      if (binding.value === undefined || binding.value === true) {
        el.focus()
      }
    }
  }
})

v-focusディレクティブの使い方は下記のようになります。
v-focus:setとした最初の要素がフォーカスされます。

<ul>
  <li>
    <input type="text" v-focus:set />
  </li>
  <li>
    <input type="text" v-focus />
  </li>
  <li>
    <input type="text" v-focus />
  </li>
  <li>
    <input type="text" v-focus />
  </li>
</ul>

v-focus:setの部分はv-focus:set="true" or v-focus:set="false"のようにbooleanを渡せます。
なので、ループの中で最初(0番目)のinput要素をフォーカスしたい場合は、下記のように記述できます。

<ul>
  <li v-for="(val, key) in models" :key="key">
    <input type="text" v-focus:set="key === 0" />
  </li>
</ul>

Comments

[jammer]

ありがとうございます！まさにこのようにやりたかった内容です！