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

Question

我有一个 'submit' 按钮，我目前在 van-submit-bar 下将其设置为禁用。我需要在用户 select 从下拉选项中输入 table 数字后启用它。

默认情况下，select table 是下拉列表中的第一个选项，因此我禁用了提交按钮。
一旦用户选择了 table，用户将能够 select 'submit' 按钮。我在下面粘贴了选项列表的内容。

这是提交按钮；

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

这是 select table 下拉选项；

   <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 },

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

谢谢

Answer 1

您可以利用 Vue 的反应性很容易地做到这一点。在没有看到您的代码的情况下，我只能提供一种通用方法。

在您的模板中

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

然后在你的脚本中

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

这将导致值开始时为空，当 select 列表更改时，v-model 将更新并启用按钮。

Answer 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"
    >

Answer 3

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

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

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

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

How to enable a disabled button if a condition is met in vue.js?

html

javascript

vue.js

vue-component