如何在 vue.js 2 上循环模板标签？

Question

我的代码是这样的：

<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>

我试试代码。但它不起作用。

存在错误：

[Vue 警告]：属性或方法“i”未在实例上定义，但 在渲染期间引用。确保声明反应数据 数据选项中的属性。

例如变量total = 5，则显示如下：

<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>

我该怎么做？

Answer 1

来自Range v-for

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

只要确保total 是一个整数而不是字符串。例如，而不是

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

使用

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

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