[Vuejs]-Vue `v-for` directive with integer range bound to component property?

4👍

✅

You just have to bind value to your counter property.Let’s assume your component is called circ.

<div id="app">
  <circ :counter="10"></circ>
</div>

<template id="circ">
  <div>
    <svg class="counter" v-for="n in counter" :key="n"
         xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 10 10">
         <circle cx="5" cy="5" r="5"></circle>
    </svg>
  </div>
</template>

Demo: http://jsbin.com/vebijiyini/edit?html,js,output

👤Belmin Bedak

[Vuejs]-Vue sending email

1👍

As mentioned in the v-for docs, you can use v-for with a numeric range directly:

v-for can also take an integer. In this case it will repeat the template that many times.

So you can just use v-for="n in counter", as in the example below:

new Vue({
  el: '#app',
  data() {
    return {
      counter: 10
    }
  }
});

.counter {
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>

<div id="app">
  <div>
    <h3>Select number of circles</h3>
    <input type="number" v-model.number="counter" />
  </div>
  <svg class="counter" v-for="n in counter" :key="n" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5"></circle>
  </svg>
</div>

👤Tom Fenech