VueJS：（I = 0; iのxと<;私は++）のため

Question

私はvue.jsにこのようなforループを作るしようとしています：

<div class="row" v-for="i = 0; i < numberOfRanking; i++"> 
    <div class="col s6 m6 l6"> 
    Rank 1 
    </div> 
    <div class="col s6 m6 l6"> 
    <input type="text" name="reward-sph-rank-1"> 
    </div> 
</div> 

私は動的なフィールドを生成して、ユーザーがランキングを追加する場所を選択したいと考えています。どうすればこれを達成できますか？

Answer 1

あなたが値の範囲をレンダリングするためにv-forに整数値を渡すことができます

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     numberOfRanking: 4, 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script> 
 
<div id="app"> 
 
    <div class="row" v-for="i in numberOfRanking"> 
 
    <div class="col s6 m6 l6"> 
 
     Rank {{ i }} 
 
    </div> 
 
    <div class="col s6 m6 l6"> 
 
     <input type="text" :name="'reward-sph-rank-' + i"> 
 
    </div> 
 
    </div> 
 
</div>

Here's the documentation on v-for.