How to use v-for with a simple range?

Question

Vue.js

how to properly use v-for="n in 10" rendering given that vue requires the key attribute to be specified
quote from the docs In 2.2.0+, when using v-for with a component, a key is now required.
I can't figure out what to bind the key attribute to. Options with index not working asks to use real elements:
" cannot be keyed. Place the key on real elements instead."

Answer 1

Never had any design issues.

<div v-for="(item, index) in items" :key="index">
...
</div>

Your error is more related to the tag you are using (which you have successfully cut off from the error text), such as here: https://github.com/vuejs/eslint-plugin-vue/issues/43

Answer 2

<template> cannot be keyed. Place the key on real elements instead.

yes it turned out here the tag was cut out but not by me.

<form action="" class="form-star">
        <template 
          v-for="(num, index) in 5" 
          v-bind:key="index">
          <input type="radio" :id="'star' + (5 - num)" name="rating" :value="5 - num"/>
          <label class = "full" :for="'star' + (5 - num)"></label>
        </template>
      </form>

As I understand it, you can’t hang v-for on a template?