如何在 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”未在實例上定義，但在渲染期間被引用。 確保在 data 選項中聲明反應數據屬性。

例如，變量 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

從范圍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