V-for in Vue.js component not working

Question

I have a component in vue.js as below.

<template>
 <md-input-container>
 <label :for="'smartpercents' + _uid"> {{ label | translate }}</label>
 <md-select :id="'smartpercents' + _uid" :name="'smartpercents' + _uid" v-model="percents" @change="onChange" md-menu-class="md-size-5 md-align-trigger">
 <md-option v-for="n * 5 in 20" :value="n" :key="n">{{ n }}</md-option>
 </md-select>
 </md-input-container>
</template>
 <style scoped>
 </style>
 <script>
 export default {
 props: {
 value: {
 required: true,
 default: null,
 validator(val) {
 return val === null
 || typeof val === 'number'
 || val instanceof Number
 || val instanceof Array;
 }
 },
 label: {
 type: String,
 required: false,
 default: null
 },
 multiple: {
 type: Boolean,
 required: false,
 default: null
 }
 },
 data() {
 return {
 percents: null
 };
 },
 methods: {
 onChange(selected) {
 const vm = this;
 vm.$emit('input', selected);
 }
 },
 created() {
 const vm = this;
 vm.percents = vm.value;
 vm.$watch('value', (newValue, oldValue) => {
 if (newValue !== oldValue) {
 vm.percents = newValue;
 }
 });
 }
 };
 </script>

I want to show numbers as below

5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100

I used the following code to do this

Code:

<md-option v-for="n * 5 in 20" :value="n" :key="n">{{ n }}</md-option>

But this code does not do what I want to do and does not work

How do I print on the screen by increasing 5 to 100 to 5?

Any help will be appreciated.

Thanks.

• M. Suurland: vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results so basically use the example in the link, but use % 5 === 0 instead of % 2 === 0
• Egor Stambakio: and probably v-for="n in 20" :value="n * 5"

Answer 1

Instead of n*5 in 20, you may try loop with n in 20, and get your expected value with n*5 Below code will give you a brief idea:

new Vue({
 el: '#app',
 data: {},
 methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<div id="app">
 <div v-for="n in 20">
 {{n*5}}
 </div>
</div>