How to loop in template tag on the vue.js 2?

Question

My code is like this :

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            @for(i=0;i<total;i++)
            <li><a href="#">{{i}}</a></li>
            @endfor
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data'],
        created: function(){
            console.log(this.$store.state.product.next_page);
        },
        computed:{
            next:function(){
                return this.$store.state.product.next_page
            }
        }
    }
</script>

I try the code. But it does not work.

There exist error :

[Vue warn]: Property or method "i" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

For example, variable total = 5, then it will display like this :

<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>

How can I do it?

Answer 1

From Range v-for

<li v-for="i in total">
  <a href="#">{{i}}</a>
</li>

Just make sure total is an integer and not a string. For example, instead of

<component-name total="5"...

use

<component-name :total="5" ...

See https://v2.vuejs.org/v2/guide/components.html#Literal-vs-Dynamic