如果在 vue.js 中满足条件，如何启用禁用按钮？答案

【问题标题】：How to enable a disabled button if a condition is met in vue.js?如果在 vue.js 中满足条件，如何启用禁用按钮？
【发布时间】：2021-09-24 13:27:52
【问题描述】：

我有一个“提交”按钮，我目前在 van-submit-bar 下设置为禁用。一旦用户从下拉选项中选择表号，我需要启用它。

默认情况下，选择表是下拉列表中的第一个选项，这就是我禁用提交按钮的原因。
一旦用户选择了一个表，用户将能够选择“提交”按钮。我已经粘贴了下面的选项列表。

这是提交按钮；

<van-submit-bar
      :price="toPrice(basketTotalPrice)"
      disabled
      label="Total:"
      currency="£"
      button-text="Submit"
      :loading="isLoading"
      @submit="onSubmit"
    >

这是选择表格下拉选项；

   <div v-bind:style="style"></div>
    <van-dropdown-menu direction="up">
    <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>



option1: [
            { text: 'Select Table', value: 0 },
            { text: 'Table 1', value: 1 },
            { text: 'Table 2', value: 2 },
            { text: 'Table 3', value: 3 },

似乎这应该是一件容易的事，但我遇到了一些麻烦。

谢谢

【问题讨论】：

请创建一个最小的例子。
可以添加你的vue代码吗？
添加到原帖

标签： javascript html vue.js vue-component

【解决方案1】：

您可以利用 Vue 的响应性非常轻松地做到这一点。在没有看到您的代码的情况下，我只能提供一种通用方法。

在您的模板中

<select v-model="selectData">...</select>
<button :disabled="!selectData">Action</button>

然后在你的脚本中

data () {
    return {
      selectData: null,
    }
  },

This will cause the value to start out empty and when the select list is changed the v-model will update and enable the button.

【讨论】：

【解决方案2】：

您可以像这样切换元素的禁用属性：

布尔值 - :disabled="true" 或 "disabled="false"
变量 - :disabled="yourVariable"
函数 - :disabled="yourFunc(arg)"

您的代码最终将如下所示：

<van-submit-bar
      :price="toPrice(basketTotalPrice)"
      :disabled="yourVariable" // <-- You can use a variable or call a function must be a boolean value
      label="Total:"
      currency="£"
      button-text="Submit"
      :loading="isLoading"
      @submit="onSubmit"
    >

【讨论】：

但是我怎样才能让它不被禁用呢？如果它默认禁用，然后在选择其他下拉菜单后未禁用。
@CalumPrice 如果您将:disabled 设置为布尔变量，那么您可以根据具有选定值的下拉菜单更改该变量的值。

【解决方案3】：

我设法通过添加使其工作；

<van-submit-bar
  :price="toPrice(basketTotalPrice)"
  label="Total:"
  currency="£"
  button-text="Submit"
  :loading="isLoading"
  **:disabled="!selectedTable"**
  @submit="onSubmit"
>

并将 selectedTable: 0, 添加到我的 data() 部分

【讨论】：