主页 / 问题 / 1289099
Accepted
overus
Asked:2022-06-02 23:27:34 +0000 UTC2022-06-02 23:27:34 +0000 UTC

如何在至少一个输入字段具有空值时禁用按钮？

  • 772

大家好。<input>有一个通过循环呈现的数组。默认值为value: ''。

disabled如果至少有一个字段为空，如何添加属性？

谢谢你。

沙盒

const app = new Vue({
  el: "#app",
  data: {
    inputs: [{
        value: ''
      },
      {
        value: ''
      },
      {
        value: ''
      },
    ],
    disabledButton: true,
  },
  computed: {
    isDisabled() {
      return this.disabledButton;
    },
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-for="item in inputs" type="text" />
  <button :disabled="isDisabled">Button</button>
</div>

vue.js

1 个回答

  1. Best Answer

    您可以使用every函数来检查所有valuey inputs，或者您可以使用some函数来摆脱模板中的否定。

    此外，如果你想将每个链接value到它自己的<input>，你必须使用v-model（双向链接）。

    const app = new Vue({
  el: "#root",
  data: {
    inputs: [
      { value: '' },
      { value: '' },
      { value: '' },
    ],
  },
  computed: {
    isButtonEnabled() {
      return this.inputs.every(input => input.value !== '');
    },
    //  isButtonDisabled() {
    //   return this.inputs.some(input => input.value === '');
    //  },
  },
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="root">
  <input v-for="(item, index) in inputs" type="text" v-model="inputs[index].value"/>
  <button :disabled="!isButtonEnabled">Button</button>
  <!-- <button :disabled="isButtonDisabled">Button</button> -->
</div>

    • 3

相关问题