CODEWITHSUNDEEP
javascriptvue.jscomponentsv-for
Soner
Soner

Reputation: 1282

V-for in Vue.js component not working

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.

Upvotes: 0

Views: 1258

Answers (1)

Sabrina Luo
Sabrina Luo

Reputation: 4000

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>

Upvotes: 1

Related Questions