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.

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>