使用 vueJs 启用/禁用按钮

Question

new Vue({
  el: '#app',
  data: {
    terms: false,
    fullname: false,
    mobile: false,
    area: false,
    city: false,
  },
  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-modal='fullname'/> name
      <input id="mobile" type='text' v-modal='mobile'/> mobile
       <input id="area" type='text' v-modal='area'/> area
      <input id="city" type='text' v-modal='city'/> city
    </label>
    
  </p>
  <button :disabled='isDisabled'>Send Form</button>
</div>

在用户填写所有详细信息之前，应禁用按钮。 但是这个问题是如果我直接点击复选框按钮启用而不检查其他字段

Answer 1

你的代码有很多问题，我会一一列出来。

• 数据属性应该是一个函数。
• fullname , mobile , ... 绑定到 input type="text" 所以空字符串更适合初始值。
• 您的v-modal 中有拼写错误
• isDisabled 的逻辑公式有误

所以最终的代码应该是这样的：

new Vue({
  el: '#app',
  data() {
    return {
      terms: false,
      fullname:'',
      mobile: '',
      area: '',
      city: '',
    };
  },
  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'/> name
      <input id="mobile" type='text' v-model='mobile'/> mobile
       <input id="area" type='text' v-model='area'/> area
      <input id="city" type='text' v-model='city'/> city
    </label>
    
  </p>
  <button :disabled='isDisabled'>Send Form</button>
</div>

我强烈推荐你使用 IDE 或 eslint。