CODEWITHSUNDEEP
javascriptvue.js
Eldar Tailov
Eldar Tailov

Reputation: 59

Vue, can't get why it acting strange in a function. Runs 5 times forEach when there is a return

That's my whole test file. I've done so far, validation and it changes span class correctly due to correctly or not correctly fulfilled input. But where I'm stuck is I want disable button if there is not correctly fulfilled input or empty at all. And I think I've done logic right, but it doesn't work. I consoled.loged it, I see where is an issue, but why it happens for me is a mystery.

In short what happens: button is signed to variable button, and inputs on every input event calling function ft_button which check's if inputs are correctly fulfilled and buy that result it changes variable button. And it would have been fine, but in this function I don't know why it runs forEach cycle 5 times when there is return written. Is it some sort of JS thing? Cause in C if there is a return it stopps looping no matter what. And of course it will print out active at the end since it just skips all returns in forEach loop.pic of console.log

on pic you can see it logs 5 times 2 which is actually a surprise for me, cause after return it should just stop looping. Gmm how then should I return active or disabled...

 <!doctype html>
    <html lang="ru">
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>1</title>
         <link rel="stylesheet" href="css/bootstrap.min.css">
         <link rel="stylesheet" href="css/font-awesome.min.css">
         <link href="css/styles.css" rel="stylesheet">
         <script src="js/vue.js"></script>
    </head>
    <body>
         <div class="wrapper">
              <div class="sample">
                    <form>
                    <div class="progress">
                        <div class="progress-bar"></div>
                    </div>
                    <div>
                        <div class="form-group" v-for="v in info">
                            <label v-bind:for='v.name'>{{ v.name | capitalize }}</label><span :class="alertType(v.value)"></span>
                            <input id="intra" type="text" class="form-control" v-on:input="checkInput($event, v)">
                            <div>{{ v.value ? 'true' : 'false'}}</div>
                        </div>
                    </div>
                    <button class="btn btn-primary" :class="button">
                        Send Data
                    </button>
                </form>
                <div>
                    <table class="table table-bordered">
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
         </div>
        <script>
        Vue.filter('capitalize', function (value) {
              if (!value) return '';
              value = value.toString();
              return value.charAt(0).toUpperCase() + value.slice(1)
        })

            new Vue({
                el: '.sample',
                data: {
                    button: 'disabled',
                    info: [
                        {
                            name: 'intra',
                            value: '',
                            pattern: /^[a-zA-Z ]{2,30}$/
                        },
                        {
                            name: 'phone',
                            value: '',
                            pattern: /^[0-9]{7,14}$/
                        },
                        {
                            name: 'email',
                            value: '',
                            pattern: /.+/
                        },
                        {
                            name: 'password',
                            value: '',
                            pattern: /.+/
                        },
                        {
                            name: 'repeatPassword',
                            value: '',
                            pattern: /.+/
                        }
                    ]
                },
                methods:
                {
                    checkInput(e, obj){
                        obj.value = obj.pattern.test(e.target.value);
                        this.button = this.ft_button();
                    },
                    alertType(value)
                    {
                        if(value === true)
                            return "fa fa-check-circle";
                        if(value === false)
                            return "fa fa-exclamation-circle";
                    },
                    ft_button()
                    {
                        this.info.forEach((el) =>
                            {
                                if (el.value === false || el.value === '')
                                {
                                    console.log(2);
                                    return 'disabled';
                                }
                            })
                        console.log(1);
                        return 'active';
                    }
                },
                computed:
                {
                }
            });
        </script>
    </body>
    </html>

Upvotes: 0

Views: 41

Answers (1)

Ethan Lipkind
Ethan Lipkind

Reputation: 1156

you can't return from forEach the same way you can in a vanilla for loop. This question may be helpful: What does `return` keyword mean inside `forEach` function?

Upvotes: 1

Related Questions