javascript - 如何在 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 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.

例如变量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://v2.vuejs.org/v2/guide/components.html#Literal-vs-Dynamic