Как закодировать тег шаблона на 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> 

Стараюсь код. Но это не работает.

Там существует ошибка:

[Вью предупреждают]: Свойство или метод «я» не определен на экземпляре, но ссылки во время визуализации. Обязательно объявляйте активные данные в опции данных.

Например, переменная общего = 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