Why vue output such complicated messages for such little problem?

vue version 2.6.7

I would like to know why vue output an infinite loop for something that could perhaps be tracked in a different way to improve the developer’s experience. It took me ages to find the issue which I posted in the vue forum, another user who looked at the code did not see the issue aswell, therefore I realised at the time that building very long forms with Vue might not be as easy as I thought.

Here is the code example that gives me an infinite loop:

The form and properties

<template>
  <div>
    <b-row class="text-center">
      <b-col></b-col>
      <b-col>
        <h2>Register</h2>
        <b-form @submit.prevent="onSubmit">

          <!--Name-->
          <b-form-group label="Name:" label-for="name" class="input" :class="{invalid: $v.name.$error }">
            <b-form-input v-model.trim="name" id="name" type="text" placeholder="Your name" @input="$v.name.$touch()" />
            <p v-if="$v.name.$error">Please provide your name</p>
          </b-form-group>

          <!--surname-->
          <b-form-group label="Surname:" label-for="surname" class="input" :class="{invalid: $v.surname.$error }">
            <b-form-input v-model.trim="surname" id="surname" type="text" placeholder="Your surname" @input="$v.surname.$touch()" />
            <p v-if="$v.surname.$error">Please provide your surname</p>
          </b-form-group>

          <!--Email-->
          <b-form-group label="Email address:" label-for="email" class="input" :class="{invalid: $v.email.$error }">
            <b-form-input v-model.trim="email" id="email" type="email" placeholder="Enter email" @input="$v.email.$touch()" />
            <p v-if="$v.email.$error">Please provide a valid email address</p>
          </b-form-group>

          <!--Password1-->
          <b-form-group label="Your password:" label-for="password1" class="input" :class="{invalid: $v.password1.$error }">
            <b-form-input v-model="password1" id="password1" type="password" placeholder="Enter your password" @blur="$v.password1.$touch()" />
            <p v-if="$v.password1.$error">Please provide a password, 6 characters minimum</p>
          </b-form-group>

          <!--Password2-->
          <b-form-group label="Type your password again:" label-for="password2" class="input" :class="{invalid: $v.password2.$error }">
            <b-form-input v-model="password2" id="password2" type="password" placeholder="Enter your password" @blur="$v.password2.$touch()" />
            <p v-if="$v.password2.$error">Type your password a second time</p>
          </b-form-group>

          <!--Business name-->
          <b-form-group label="Business name(if any):" label-for="business" class="input" :class="{invalid: $v.business.$error }">
            <b-form-input v-model.trim="business" id="business" type="text" placeholder="Your business name" @input="$v.business.$touch()" />
            <p v-if="$v.business.$error">Please provide your business name</p>
          </b-form-group>

          <!--Address line 1-->
          <b-form-group label="Address line 1:" label-for="address1" class="input" :class="{invalid: $v.address1.$error }">
            <b-form-input v-model.trim="address1" id="address1" type="text" placeholder="Your first line of address"
              @input="$v.address1.$touch()" />
            <p v-if="$v.address1.$error">Please provide your first line of address</p>
          </b-form-group>

          <!--Address line 2-->
          <b-form-group label="Address line 2:" label-for="address2" class="input" :class="{invalid: $v.address2.$error }">
            <b-form-input v-model.trim="address2" id="address2" type="text" placeholder="Your second line of address"
              @input="$v.address2.$touch()" />
            <p v-if="$v.address2.$error">Please provide your second line of address</p>
          </b-form-group>

          <!--Postcode-->
          <b-form-group label="Postcode:" label-for="postcode" class="input" :class="{invalid: $v.postcode.$error }">
            <b-form-input v-model.trim="postcode" id="postcode" type="text" placeholder="Your postcode" @input="$v.postcode.$touch()" />
            <p v-if="$v.postcode.$error">Please provide your postcode</p>
          </b-form-group>

          <!--Country-->
          <b-form-group label="Country:" label-for="country" class="input" :class="{invalid: $v.country.$error }">
            <b-form-input v-model.trim="country" id="country" type="text" placeholder="Select a country" @input="$v.country.$touch()" />
            <p v-if="$v.country.$error">Please select your country</p>
          </b-form-group>

          <!--Phone-->
          <b-form-group label="Phone:" label-for="phone" class="input" :class="{invalid: $v.phone.$error }">
            <b-form-input v-model.trim="phone" id="phone" type="text" placeholder="Select a phone" @input="$v.phone.$touch()" />
            <p v-if="$v.phone.$error">Please provide your phone number</p>
          </b-form-group>

          <!--V.A.T-->
          <b-form-group label="V.A.T tax no(EU Only):" label-for="vat" class="input" :class="{invalid: $v.vat.$error }">
            <b-form-input v-model.trim="vat" id="vat" type="text" placeholder="Your vat number" @input="$v.vat.$touch()" />
            <p v-if="$v.vat.$error">Please provide your VAT tax number</p>
          </b-form-group>

          <!--Newsletter-->
          <b-form-group>
            <b-form-checkbox switch v-model="newsletter" name="check-button">Receive our cool offers, coupons and
              Newsletter
            </b-form-checkbox>
          </b-form-group>


          <b-button type="submit" variant="success mr-1">Submit registration</b-button>
        </b-form>

      </b-col>
      <b-col></b-col>
    </b-row>
  </div>
</template>
<script>
  import {
    required,
    minLength,
    between,
    email,
    sameAs
  } from 'vuelidate/lib/validators';

  export default {
    data() {
      return {
        name: '',
        surname: '',
        email: '',
        password1: '',
        password2: '',
        business: '',
        addressline1: '',
        addressline2: '',
        postcode: '',
        country: '',
        phone: '',
        vat: '',
        newsletter: true
      }
    },
    validations: {
      name: {
        required,
        minLength: minLength(2)
      },
      surname: {
        required,
        minLength: minLength(2)
      },
      email: {
        required,
        email
      },
      password1: {
        required,
        name: 'between',
        between: between(6, 25)
      },
      password2: {
        sameAs: sameAs('password1')
      },
      business: {

      },
      addressline1: {
        required,
        minLength: minLength(4)
      },
      addressline2: {
        required,
      },
      postcode: {
        required,
        minLength: minLength(2)
      },
      country: {

      },
      phone: {

      },
      vat: {

      }
    }
  }
</script>

The error:

---> <Register> at src/views/frontend/Register.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1883
globalHandleError @ vue.runtime.esm.js?2b0e:1878
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3537
updateComponent @ vue.runtime.esm.js?2b0e:4037
get @ vue.runtime.esm.js?2b0e:4440
Watcher @ vue.runtime.esm.js?2b0e:4429
mountComponent @ vue.runtime.esm.js?2b0e:4044
Vue.$mount @ vue.runtime.esm.js?2b0e:8373
init @ vue.runtime.esm.js?2b0e:3111
createComponent @ vue.runtime.esm.js?2b0e:5939
createElm @ vue.runtime.esm.js?2b0e:5886
patch @ vue.runtime.esm.js?2b0e:6438
Vue._update @ vue.runtime.esm.js?2b0e:3916
updateComponent @ vue.runtime.esm.js?2b0e:4037
get @ vue.runtime.esm.js?2b0e:4440
Watcher @ vue.runtime.esm.js?2b0e:4429
mountComponent @ vue.runtime.esm.js?2b0e:4044
Vue.$mount @ vue.runtime.esm.js?2b0e:8373
init @ vue.runtime.esm.js?2b0e:3111
createComponent @ vue.runtime.esm.js?2b0e:5939
createElm @ vue.runtime.esm.js?2b0e:5886
createChildren @ vue.runtime.esm.js?2b0e:6014
createElm @ vue.runtime.esm.js?2b0e:5915
createChildren @ vue.runtime.esm.js?2b0e:6014
createElm @ vue.runtime.esm.js?2b0e:5915
patch @ vue.runtime.esm.js?2b0e:6438
Vue._update @ vue.runtime.esm.js?2b0e:3916
updateComponent @ vue.runtime.esm.js?2b0e:4037
get @ vue.runtime.esm.js?2b0e:4440
Watcher @ vue.runtime.esm.js?2b0e:4429
mountComponent @ vue.runtime.esm.js?2b0e:4044
Vue.$mount @ vue.runtime.esm.js?2b0e:8373
init @ vue.runtime.esm.js?2b0e:3111
createComponent @ vue.runtime.esm.js?2b0e:5939
createElm @ vue.runtime.esm.js?2b0e:5886
patch @ vue.runtime.esm.js?2b0e:6477
Vue._update @ vue.runtime.esm.js?2b0e:3916
updateComponent @ vue.runtime.esm.js?2b0e:4037
get @ vue.runtime.esm.js?2b0e:4440
Watcher @ vue.runtime.esm.js?2b0e:4429
mountComponent @ vue.runtime.esm.js?2b0e:4044
Vue.$mount @ vue.runtime.esm.js?2b0e:8373
(anonymous) @ main.js?56d7:39
./src/main.js @ app.js:4909
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:5042
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?2b0e:1887 RangeError: Maximum call stack size exceeded
    at Dep.depend (vue.runtime.esm.js?2b0e:714)
    at Object.reactiveGetter [as validations] (vue.runtime.esm.js?2b0e:1027)
    at VueComponent.proxyGetter [as validations] (vue.runtime.esm.js?2b0e:4589)
    at renderNested (index.js?1dce:556)
    at eval (index.js?1dce:453)
    at Array.map (<anonymous>)
    at VueComponent.children (index.js?1dce:452)
    at Watcher.get (vue.runtime.esm.js?2b0e:4440)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4545)
    at VueComponent.computedGetter [as children] (vue.runtime.esm.js?2b0e:4797)

The issue is: If you look at the properties: addressline1: ‘’, addressline2: ‘’,

They don’t match the input names: @input=“$v.address1.$touch()” /> @input=“$v.address2.$touch()” />

Can’t vue be able to find this type of issues in a more clear way for developers? I spent so much time trying to find the issue, it would have been great to have a message like: v.address1.$touch() and v.address1.$touch() not found in the properties or similar.

I love vue but it needs a better way to track issues like those. Or perhaps I am not using the right tools to see the bugs in a correct manner(still new to Vue).

Thanks so much.

[Benoit1980]

why would this issue be closed? It is an important question.

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!