【vue】v-forでセレクトボックスに指定回数の表示と、10ずつの繰り返し処理

v-forで1から10までの表示方法

この方法で1から10までが表示されます

<template>
  <div id="app">
    <ul v-for="n in 10" :key="n">
      <li>{{ n }}</li>
    </ul>
  </div>
</template>

結果

v-forで10ずつ処理する方法

通常のfor文の場合だと、このように増やしていきます

    for (int i = 0; i < 10; i+10){
      sum += 2;
    }

しかし、vueの場合だとi+10のやり方ではうまくいかず
どのように10ずつ増やすのかがわからなかったです。

解決方法は本当に簡単で、この方法で10ずつ表示ができます

<template>
  <div id="app">
    <ul v-for="n in 10" :key="n">
      <li>{{ n * 10 }}</li>
    </ul>
  </div>
</template>

結果

セレクトボックスで10ずつ表示する方法

さて、自分が対処方法をみつけるのに時間がかかってしまったのがセレクトボックスに10ずつ表示させる方法でした。
{{ n * 10 }}の方法を考えれば簡単なのですが、
どこにi+10の要素を書けばいいのかに固執してしまっていました。

セレクトボックスで10ずつ表示させる方法も本当に簡単でこのようにやります

<template slot-scope="hoge">
   <el-select 
      v-model="hoge" 
      placeholder="Select">
      <el-option 
        v-for="n in 10"
        :key="n"
        :value="n * 10">
      </el-option>
   </el-select>
</template>

結果

:valueのところに同じようにかけばいいんですね。
v-forにかいたり keyの部分にi+10の要素を入れようとしてまったくうまくいっていなかったです。

通常のfor文のやり方につられてしまい、ずっと+を使用して対処しようとしていたのもよくなかったです。

0から始める方法

ちなみに0から始める方法はこのようにやります

<template>
  <div id="app">
    <ul 
      v-for="n in 10" :key="n">
      <li>{{ (n - 1)  * 10 }}</li>
    </ul>
  </div>
</template>

結果

参考記事

v-forで配列を指定の回数だけループさせて出力させる