我正在尝试禁用表单的提交按钮,直到为每个控件输入有效数据。
在为每个字段输入正确数据后,提交按钮保持禁用状态。
标记:
<div id="app">
<form action='#' method='POST'>
<div class="columns">
<div class="column">
<div class="field">
<div class="control">
<label class="label">Last Name</label>
<input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('lastname') }" class="input" name="lastname" type="text">
<span v-show="errors.has('lastname')" class="help is-danger">{{ errors.first('lastname') }}</span>
</div>
</div>
</div>
<div class="column">
<div class="field">
<div class="control">
<label class="label">Desk Number</label>
<input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('desknum') }" class="input" name="desknum" type="text">
<span v-show="errors.has('desknum')" class="help is-danger">{{ errors.first('desknum') }}</span>
</div>
</div>
</div>
</div>
<button :disabled='!isComplete' class="button is-link" name='submit_data' value='go'>Submit</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.9/vee-validate.min.js">
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
p_pat_name_first: null,
p_pat_name_last: null,
p_pat_date_birth: null,
p_pat_gender: null,
p_pat_twin: null,
p_emory_id: null,
p_mother_name_first: null,
p_mother_name_last: null,
p_parent_phone_primary: null,
};
},
computed: {
isComplete() {
return
this.p_pat_name_first &&
this.p_pat_name_last &&
this.p_pat_date_birth &&
this.p_pat_gender &&
this.p_pat_twin &&
this.p_mother_name_first &&
this.p_mother_name_last &&
this.p_parent_phone_primary;
}
}
});
</script>
当表单完整且有效时,不允许“提交”按钮自行启用,我做错了什么?