@DronTat

Почему через forEach не вызывается метод?

Через axios(в будущем) планируется забирать вес транспорта и отобразить через семисегментный svg пользователю. На данным момент сделал свойство random:
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;
            },
        },

Само отображение svg:
<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>

Но в методе number, через forEach в метод segment не передается переменная,
выдает ошибку: "Cannot read property 'segment' of undefined".
Когда вызываю segment вне цикла forEach, то svg отображается правильно
number: function(array){
                var temp = [];
                array.forEach(function (item) {
                    alert(item);
                    temp.push(this.segment(item));
                });
                this.numberSvg = temp;
            },

Метод Segment
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',
                        };
                }
            }
        },
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
Да когда вы уже перестанете function использовать? Ну ёпрст...

number (array){
                var temp = [];
                array.forEach((item) => {
                    alert(item);
                    temp.push(this.segment(item));
                });
                this.numberSvg = temp;
            },
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы