title: Vue, can't get why it acting strange in a function. Runs 5 times forEach when there is a return
body: <p>That's my whole test file. I've done so far, validation and it changes <code>span</code> class correctly due to correctly or not correctly fulfilled input. But where I'm stuck is I want disable <code>button</code> 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. </p>
  
  <p>In short what happens: button is signed to variable <code>button</code>, and inputs on every input event calling function <code>ft_button</code> which check's if inputs are correctly fulfilled and buy that result it changes variable <code>button</code>. And it would have been fine, but in this function I don't know why it runs forEach cycle 5 times when there is <code>return</code> 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 <code>active</code> at the end since it just skips all <code>returns</code> in forEach loop.<a href="https://i.stack.imgur.com/m9qiV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9qiV.png" alt="pic of console.log"></a></p>
  
  <p>on pic you can see it logs 5 times <code>2</code> which is actually a surprise for me, cause after <code>return</code> it should just stop looping. Gmm how then should I return <code>active</code> or <code>disabled</code>...</p>
  
  <pre><code> &lt;!doctype html&gt;
      &lt;html lang="ru"&gt;
      &lt;head&gt;
           &lt;meta charset="UTF-8"&gt;
           &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
           &lt;title&gt;1&lt;/title&gt;
           &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
           &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt;
           &lt;link href="css/styles.css" rel="stylesheet"&gt;
           &lt;script src="js/vue.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
           &lt;div class="wrapper"&gt;
                &lt;div class="sample"&gt;
                      &lt;form&gt;
                      &lt;div class="progress"&gt;
                          &lt;div class="progress-bar"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div class="form-group" v-for="v in info"&gt;
                              &lt;label v-bind:for='v.name'&gt;{{ v.name | capitalize }}&lt;/label&gt;&lt;span :class="alertType(v.value)"&gt;&lt;/span&gt;
                              &lt;input id="intra" type="text" class="form-control" v-on:input="checkInput($event, v)"&gt;
                              &lt;div&gt;{{ v.value ? 'true' : 'false'}}&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;button class="btn btn-primary" :class="button"&gt;
                          Send Data
                      &lt;/button&gt;
                  &lt;/form&gt;
                  &lt;div&gt;
                      &lt;table class="table table-bordered"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
          &lt;script&gt;
          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) =&gt;
                              {
                                  if (el.value === false || el.value === '')
                                  {
                                      console.log(2);
                                      return 'disabled';
                                  }
                              })
                          console.log(1);
                          return 'active';
                      }
                  },
                  computed:
                  {
                  }
              });
          &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>