A
A
Andrey2019-04-14 13:14:10
Vue.js
Andrey, 2019-04-14 13:14:10

Why is the forEach method not called?

Through axios (in the future), it is planned to take the weight of the transport and display it through a seven-segment svg to the user. At the moment, I made the random property:

computed:{
            random: function() {
                var min = -9999;
                var max = 99999;
                min = Math.ceil(min);
                max = Math.floor(max);
                var number = String(Math.floor(Math.random() * (max - min + 1)) + min);
                var arrayNumber = number.split('').reverse();
                this.number(arrayNumber);
                return arrayNumber;
            },
        },

The svg display itself:
<div class="weight-val">
   <svg height="100">
        <use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-5" v-bind:style="numberSvg[4]"></use>
   </svg>                  
   <svg height="100">
        <use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-4" v-bind:style="numberSvg[3]"></use>
   </svg>
   <svg height="100">
        <use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-3" v-bind:style="numberSvg[2]"></use>
   </svg>
   <svg height="100">
        <use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-2" v-bind:style="numberSvg[1]"></use>
   </svg>
   <svg height="100">
        <use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-1" v-bind:style="numberSvg[0]"></use>
   </svg>
</div>

But in the number method, a variable is not passed to the segment method through forEach, it
gives an error: "Cannot read property 'segment' of undefined".
When I call segment outside the forEach loop, the svg is rendered correctly
number: function(array){
                var temp = [];
                array.forEach(function (item) {
                    alert(item);
                    temp.push(this.segment(item));
                });
                this.numberSvg = temp;
            },

Segment method
segment: function (number) {
                switch (number){
                    case '0':
                        return{
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-3' : 'yellow',
                            '--segment-4' : 'yellow',
                            '--segment-5' : 'yellow',
                            '--segment-6' : 'yellow',
                        };
                    case '1':
                        return{
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow'
                        };
                    case '2':
                        return{
                            '--segment-6' : 'yellow',
                            '--segment-1' : 'yellow',
                            '--segment-7' : 'yellow',
                            '--segment-4' : 'yellow',
                            '--segment-3' : 'yellow',
                        };
                    case '3':
                        return{
                            '--segment-6' : 'yellow',
                            '--segment-7' : 'yellow',
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-3' : 'yellow',
                        };
                    case '4':
                        return{
                            '--segment-5' : 'yellow',
                            '--segment-7' : 'yellow',
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow',
                        };
                    case '5':
                        return{
                            '--segment-6' : 'yellow',
                            '--segment-7' : 'yellow',
                            '--segment-5' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-3' : 'yellow',
                        };
                    case '6':
                        return{
                            '--segment-6' : 'yellow',
                            '--segment-7' : 'yellow',
                            '--segment-5' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-3' : 'yellow',
                            '--segment-4' : 'yellow',
                        };
                    case '7':
                        return{
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-6' : 'yellow',
                        };
                    case '8':
                        return{
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-3' : 'yellow',
                            '--segment-4' : 'yellow',
                            '--segment-5' : 'yellow',
                            '--segment-6' : 'yellow',
                            '--segment-7' : 'yellow',
                        };
                    case '9':
                        return{
                            '--segment-1' : 'yellow',
                            '--segment-2' : 'yellow',
                            '--segment-3' : 'yellow',
                            '--segment-5' : 'yellow',
                            '--segment-6' : 'yellow',
                            '--segment-7' : 'yellow',
                        };
                    case '-':
                        return{
                            '--segment-7' : 'yellow',
                        };
                }
            }
        },

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Yarkov, 2019-04-14
@DronTat

When will you stop using function ? Well oops...

number (array){
                var temp = [];
                array.forEach((item) => {
                    alert(item);
                    temp.push(this.segment(item));
                });
                this.numberSvg = temp;
            },

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question