title: How to set maxlength for fields in vuejs?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data() {
      return {
        terms: false,
        fullname:'',
         maxfullname: 10,
        mobile: '',
        maxmobile: 10,
        area: '',
        maxarea: 12,
        city: '',
        maxcity: 12,
      };
    },
    computed: {
      isDisabled: function(){
          return !this.terms || !this.fullname || !this.mobile || !this.area || !this.city;
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;p&gt;
      &lt;label for='terms'&gt;
        &lt;input id='terms' type='checkbox' v-model='terms'/&gt; I accept terms!!!
        &lt;input id="fullname" type='text' v-model='fullname'  :maxlength="maxfullname"/&gt; name
        &lt;input id="mobile" type='text' v-model='mobile'/ :maxlength="maxmobile"&gt; mobile
         &lt;input id="area" type='text' v-model='area' :maxlength="maxarea"/&gt; area
        &lt;input id="city" type='text' v-model='city':maxlength="maxcity"/&gt; city
      &lt;/label&gt;
      
    &lt;/p&gt;
    &lt;button :disabled='isDisabled'&gt;Send Form&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>At present i am having the issue like, In each field, if i enter 2 or 3 characters and  click on the button, button is enabling,
  But trying for until user enter maxlength characters for all fields then only button should enabled</p>