v-modelの値をループ内で動的に指定したい

やりたいこと

v-forのリストの中のinputのv-modelを個別に指定したい。
さらにその値をvuex storeに入れたい。

<template>
  <div>
    <dl v-for="n in 10">
      <dt>第{{n}}位</dt>
      <dd>
        <input v-model="/* ここをなんとかしたい */">
      </dd>
    </dl>
  </div>
</template>

方法1. v-forをあきらめる。

<template>
  <div>
    <dl>
      <dt>第1位</dt>
      <dd>
        <input v-model="rank1">
      </dd>
      <dt>第2位</dt>
      <dd>
        <input v-model="rank2">
      </dd>
      <!-- 中 略 -->
      <dt>第10位</dt>
      <dd>
        <input v-model="rank10">
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rank1: '',
      rank2: '',
      // 中略
      rank10: ''
    }
  }
}
</script>

いやだ！やりたくない！
YAMEKUDASTOP!!

方法2. オブジェクト化する

<template>
  <div>
    <dl v-for="n in 10">
      <dt>第{{n}}位</dt>
      <dd>
        <input v-model="ranks['rank' + n]">
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ranks: {
        rank1: '',
        rank2: '',
        // 中略
        rank10: ''
      }
    }
  }
}
</script>

HTML部分がものすごくすっきりします。
ただ、

現代の JavaScript の制約のため、Vue はプロパティの追加や削除を検出することはできません。

ということもあるので、オブジェクトを使いたくない場合もあるかもしれません。

方法3. $dataを使う

<template>
  <div>
    <dl v-for="n in 10">
      <dt>第{{n}}位</dt>
      <dd>
        <input v-model="$data['rank' + n]">
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rank1: '',
      rank2: '',
      // 中略
      rank10: ''
    }
  }
}
</script>

言われてみれば「あ〜」って感じなのですが、気づきませんでした。
配列にもならないので変更検知も簡単です。

おしまい

YAMEKUDASTOP言いたかっただけ感ありますね。
OYASLEEPNASAI !!

参考

Dynamic v-model directive #1056
（「ヘルプフォーラムじゃねーぞ」って怒られてますね）