vue.jsのv-forでスプレッド演算子が使えない

Question

vue.jsで単一ファイルコンポーネントを使っています。
html(templateタグ内)で特定のタグを複数回表示したく、スプレッド演算子を用いて下記のように書いたところ動作しませんでした。

<template>
  <div>
    <div v-for="(n,idx) in [...Array(9).keys()]" :key="idx">{{n}}</div>
  </div>
</template>

同じファイル内でjavascriptではスプレッド演算子は使えています。

<script>
export default {
  methods: {
    clicked() {
      console.log([...Array(9).keys()]); //これは動く
    }
  }
}
</script>

vue-cliでプロジェクトを作成したため、webpackなどは特にいじっておりません。
他の方がtemplate内でスプレッド演算子を使っているコードは見たことがあります。
どうしたら動作するようになりますか。

##追記

<div v-for="(n,idx) in [...Array(9)]" :key="idx">{{n}}</div>

としたところ中身が空のdivが9個できたのでスプレッド演算子ではなくkeys()が動作していないと思われます。

Answer 1

Array.keys() は Array イテレーターオブジェクトを返します。
スプレッド構文でイテレーターを展開すると空のオブジェクトとして展開されるようです。
代わりに Array.from() を使用して Array インスタンスを作成してみてください。

Array.from(
    Array(9).keys()
) // [0, 1, 2, 3, 4, 5, 6, 7, 8]

Comments

[aruto]

ありがとうございます。おかげさまで動きました。
一つお伺いしたいのですが
>スプレッド構文でイテレーターを展開すると空のオブジェクトとして展開される
というのはvue.jsのtemplateに限った話でしょうか。

[退会済みユーザー]

お役に立ててよかったです。

> vue.jsのtemplateに限った話でしょうか
Vue に限らず他のテンプレートエンジンでも起こりうる話です。
必ずしも Vanilla JS と同じ動作になるわけではないので、なるべく単純なコードにした方がいいと思います。

[aruto]

ありがとうございます。
> Vue に限らず他のテンプレートエンジンでも起こりうる話です。
そうなんですね。
単純なコードを心がけようと思います