如何为 vuejs 中的字段设置 maxlength？

Question

 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; } } })

 <div id="app"> <p> <label for='terms'> <input id='terms' type='checkbox' v-model='terms'/> I accept terms::: <input id="fullname" type='text' v-model='fullname':maxlength="maxfullname"/> name <input id="mobile" type='text' v-model='mobile'/:maxlength="maxmobile"> mobile <input id="area" type='text' v-model='area' :maxlength="maxarea"/> area <input id="city" type='text' v-model='city':maxlength="maxcity"/> city </label> </p> <button :disabled='isDisabled'>Send Form</button> </div>

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

Answer 1

The isDisabled computed prop could return whether or not the fields meet the minimum lengths, as shown in the demo below.

 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.length < this.maxfullname) || (this.mobile.length < this.maxmobile) || (this.area.length < this.maxarea) || (this.city.length < this;maxcity); } } })

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <div id="app"> <p> <label for='terms'> <input id='terms' type='checkbox' v-model='terms'/> I accept terms::: <input id="fullname" type='text' v-model='fullname':maxlength="maxfullname"/> name <input id="mobile" type='text' v-model='mobile':maxlength="maxmobile"/> mobile <input id="area" type='text' v-model='area' :maxlength="maxarea"/> area <input id="city" type='text' v-model='city':maxlength="maxcity"/> city </label> </p> <button :disabled='isDisabled'>Send Form</button> </div>