vue.js、v-forの使い方

Question

前提・実現したいこと

vue.jsの入門本を片手に試行錯誤しています。
v-forの使い方が良く分かりません。
patternsには配列のほか数値も直接入れることができるとのことで、変数もOKかなと思い試してみましたがダメでした。
そもそも使い方が間違っているような気もしますが…；
このような書き方はできないのでしょうか？

やりたいことは「patternsの値の分だけリストを繰り返す」です。

<ul>
<li v-for="x in patterns" :key="x">{{x}}</li>
</ul>
<input type="number" v-model="patterns">

var app = new Vue({
	el:"#app",
	data:{
		patterns:3
	}
}

ロード時は希望通り下記の通り表示されます。
・1
・2
・3

が、inputboxで値を変更すると、patterns値の桁数回数しか繰り返されません。
1～9の場合は1回、10～99の場合は2回、100～999だと3回・・・etc.

patternsの分だけ繰り返すにはどのように記述すれば良いでしょうか。

Comments

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください

[plasticgrammer]

parseIntで数値化を明示するとどうなりますか？

v-for="x in parseInt(patterns)"

[Gonzo]

>m.ts10806
指摘ありがとうございます。修正してみました。

>plasticgrammer
parseIntを試してみたところ希望通りの動きとなりました。
なるほど、数値として扱ってくれるように明示すれば良いだけだったんですね。
ありがとうございます。

[plasticgrammer]

うまくいったとのこと了解しました。
では同じ内容を回答にも転記しておきます。

Answer 1

一応メモ。いずれもparseIntは不要。

１．王道(?)
Inputのv-modelに、数値入力を指定する修飾子.numberを記述。

<input type="number" v-model.number="patterns">

２．ほかのやり方
patternsから0を引く。

<li v-for="x in (patterns-0)">{{x}}</li>

Answer 2

v-for="x in parseInt(patterns)"
でどうでしょうか。

Comments

[Gonzo]

patternsの中にnを置いてpatterns.nで試してみたり試行錯誤してもダメだったのでとりあえずこの件はあきらめて次の項目に移ろうと思っていたので助かりました。
ありがとうございました。